feat(chat-messages): add ai-welcome-screen component #1231
Conversation
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
5 times, most recently
from
4d544d1 to
3228016
Compare
📝 WalkthroughWalkthroughAdds a new AI chat feature set: message model interfaces (BaseChatMessage, AiChatMessage, ToolChatMessage, TemplateChatMessage, ChatMessage union), components (SiAiChatContainerComponent, SiAiWelcomeScreenComponent, SiToolMessageComponent, SiAttachmentListComponent, updated SiChatInput/SiChatContainer behaviors), and example apps/tests. Enhances markdown renderer with MarkdownRendererOptions, optional syntax highlighting and LaTeX rendering, and new translation keys. Introduces helper utilities for sanitized HTML and element/string caching, theme tokens for AI visuals, and multiple unit/playwright tests and example pages demonstrating the new chat UI and interactions. Sequence Diagram(s)sequenceDiagram
participant User
participant ChatInput as SiChatInput
participant ChatContainer as SiAiChatContainer
participant ActionCache as MsgActionCache
participant Renderer as MarkdownRenderer
participant MsgComponent as MessageComponents
User->>ChatInput: submit message / select prompt
ChatInput->>ChatContainer: emit messageSent
ChatContainer->>ChatContainer: append user message
ChatContainer->>ChatContainer: shouldInjectLoadingMessage?
ChatContainer->>ChatContainer: inject AI loading message (if needed)
ChatContainer->>ActionCache: getMessageActions(message)
alt cached
ActionCache-->>ChatContainer: cached actions
else not cached
ActionCache->>ActionCache: compute primary/secondary actions
ActionCache-->>ChatContainer: return actions
end
ChatContainer->>Renderer: render message content (syntax/LaTeX/translate options)
Renderer-->>ChatContainer: rendered Node
ChatContainer->>MsgComponent: route message to appropriate component (user/ai/tool/template)
MsgComponent-->>User: display content, actions, attachments, collapsible tool panels
Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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}
There was a problem hiding this comment.
Actionable comments posted: 16
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (11)
package-lock.jsonis excluded by!**/package-lock.jsonplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (68)
.npmrcapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/markdown-renderer/index.api.mdapi-goldens/element-ng/translate/index.api.mddocs/components/chat-messages/chat-message.mddocs/patterns/ai/ai-chat.mdpackage.jsonplaywright/e2e/element-examples/static.spec.tsplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yamlprojects/dashboards-demo/src/styles.scssprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/message-action.model.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-chat-message.component.scssprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/link/si-link.directive.tsprojects/element-ng/markdown-renderer/markdown-renderer.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/status-bar/si-status-bar.component.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-theme/src/styles/components/_markdown-hljs-theme.scssprojects/element-theme/src/styles/components/_markdown.scssprojects/element-theme/src/styles/variables/_semantic-tokens.scssprojects/element-theme/src/theme/_theme-element.scsssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-ai-message.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.htmlsrc/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-chat-container.htmlsrc/app/examples/si-chat-messages/si-chat-container.tssrc/app/examples/si-chat-messages/si-chat-input.htmlsrc/app/examples/si-chat-messages/si-tool-message.htmlsrc/app/examples/si-chat-messages/si-tool-message.tssrc/app/examples/si-chat-messages/si-user-message.tssrc/app/examples/si-markdown-renderer/si-markdown-renderer.htmlsrc/app/examples/si-markdown-renderer/si-markdown-renderer.tssrc/assets/sample-markdown.mdsrc/styles.scss
💤 Files with no reviewable changes (3)
- projects/element-ng/status-bar/si-status-bar.component.ts
- projects/element-ng/link/si-link.directive.ts
- projects/element-ng/chat-messages/message-action.model.ts
🧰 Additional context used
🧠 Learnings (26)
📚 Learning: 2025-12-09T14:31:33.543Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50
Timestamp: 2025-12-09T14:31:33.543Z
Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.
Applied to files:
projects/element-ng/chat-messages/si-chat-input.component.spec.tsdocs/components/chat-messages/chat-message.mdsrc/app/examples/si-chat-messages/si-ai-message.tssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-chat-message.component.tssrc/app/examples/si-chat-messages/si-tool-message.htmlprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-chat-message.component.scssprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlsrc/app/examples/si-chat-messages/si-user-message.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-tool-message.component.tssrc/app/examples/si-chat-messages/si-tool-message.tsprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-ai-message.component.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/index.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-user-message.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-chat-container.htmlprojects/element-ng/chat-messages/si-chat-input.component.ts
📚 Learning: 2025-11-18T12:37:30.510Z
Learnt from: Killusions
Repo: siemens/element PR: 1040
File: projects/element-ng/chat-messages/si-chat-input.component.ts:338-349
Timestamp: 2025-11-18T12:37:30.510Z
Learning: In projects/element-ng/chat-messages/si-chat-input.component.ts, the interrupt behavior is intentionally different for button clicks vs Enter key: the button can emit interrupt even without content, but pressing Enter requires content or attachments (canSend() must be true) to emit interrupt.
Applied to files:
projects/element-ng/chat-messages/si-chat-input.component.spec.tssrc/app/examples/si-chat-messages/si-chat-input.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-ai-message.component.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-user-message.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-chat-container.htmlprojects/element-ng/chat-messages/si-chat-input.component.ts
📚 Learning: 2025-12-15T10:05:59.100Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.
Applied to files:
projects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-17T04:34:55.597Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: Guideline: In Angular projects using OnPush change detection (zoneless mode), you only need to call ChangeDetectorRef.markForCheck() for asynchronous operations (e.g., setTimeout, setInterval, Promises, Observables) where a change is not automatically detected. Event handlers triggered by Angular template bindings (click, input, etc.) will trigger change detection automatically and do not require explicit markForCheck() calls. Apply this broadly to TS files within Angular components/services that use OnPush; use markForCheck() selectively for async work where change detection wouldn’t run otherwise.
Applied to files:
projects/element-ng/chat-messages/si-chat-input.component.spec.tssrc/app/examples/si-chat-messages/si-ai-message.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-chat-message.component.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tssrc/app/examples/si-markdown-renderer/si-markdown-renderer.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tssrc/app/examples/si-chat-messages/si-user-message.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/markdown-renderer/markdown-renderer.tssrc/app/examples/si-chat-messages/si-tool-message.tsprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-message.component.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-user-message.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/si-chat-input.component.ts
📚 Learning: 2025-12-09T14:33:54.441Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: src/app/examples/si-chat-messages/si-ai-message.ts:24-43
Timestamp: 2025-12-09T14:33:54.441Z
Learning: In src/app/examples/ (example/demo code) directories, allow and expect code duplication. Treat duplication as acceptable for demonstration code that aims to illustrate usage rather than enforce DRY. Do not enforce refactoring to remove duplication in example files; focus on readability and clarity of examples. This applies to all TypeScript files under src/app/examples (including nested subdirectories like si-chat-messages).
Applied to files:
src/app/examples/si-chat-messages/si-ai-message.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-markdown-renderer/si-markdown-renderer.tssrc/app/examples/si-chat-messages/si-user-message.tssrc/app/examples/si-chat-messages/si-tool-message.tssrc/app/examples/si-chat-messages/si-chat-container.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-09T14:32:34.036Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:34.036Z
Learning: In projects/element-ng/chat-messages, nested if blocks are preferred over switch statements for branching on message types in Angular templates.
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-chat-message.component.scssprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/index.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-user-message.component.tssrc/app/examples/si-chat-messages/si-chat-container.html
📚 Learning: 2025-12-04T11:54:31.132Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1133
File: projects/element-ng/tour/si-tour.service.spec.ts:21-26
Timestamp: 2025-12-04T11:54:31.132Z
Learning: In the siemens/element repository, all components are standalone by default and do not require the explicit `standalone: true` flag. Components should be added to the `imports` array in TestBed configuration, not the `declarations` array.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-15T07:16:53.762Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-01T04:01:27.365Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1099
File: projects/element-ng/accordion/si-accordion.component.spec.ts:39-43
Timestamp: 2025-12-01T04:01:27.365Z
Learning: With Angular 20 and esbuild, synchronous `TestBed.configureTestingModule(...).compileComponents()` calls work correctly even when components use external templates (templateUrl), because esbuild pre-compiles templates at build time. The async/await pattern is not required in this scenario.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-11T10:09:01.564Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-17T14:01:05.705Z
Learnt from: dauriamarco
Repo: siemens/element PR: 908
File: projects/element-ng/side-panel/si-side-panel.component.ts:70-74
Timestamp: 2025-12-17T14:01:05.705Z
Learning: In the Element side-panel component (projects/element-ng/side-panel/si-side-panel.component.ts), the `xxxlMinimum` breakpoint (1920px) is intentionally hardcoded as a private static constant rather than being part of the configurable `Breakpoints` interface. This design preserves full Bootstrap compatibility (which only defines breakpoints up to xxl/1400px) while allowing Element to handle ultra-wide screens explicitly without affecting the standard breakpoint configuration.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-chat-container.component.scss
📚 Learning: 2025-12-09T14:32:26.166Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:26.166Z
Learning: In Angular templates, prefer using nested *ngIf blocks over *ngSwitch for branching on message types within the chat-messages components. Use *ngIf with else branches to handle distinct cases and avoid complex switch logic in HTML templates. This guideline applies to all HTML templates under projects/element-ng/chat-messages.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.html
📚 Learning: 2025-12-15T07:17:06.981Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-15T07:16:32.082Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-08T11:25:51.584Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-08T11:25:20.861Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:17.637Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-08T11:24:45.272Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-09T14:19:34.846Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:34.846Z
Learning: In library projects like element-ng, optional features that are provided through callback/function parameters (e.g., syntaxHighlighter in markdown renderer) should not have their implementation dependencies (e.g., highlight.js) listed in the library's dependencies. These should remain in devDependencies for demo/example purposes, and consuming applications should install them directly if they choose to use those features.
Applied to files:
src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
📚 Learning: 2025-12-16T16:19:17.950Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1207
File: playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--data-entered.yaml:38-38
Timestamp: 2025-12-16T16:19:17.950Z
Learning: Do not review files in the playwright/snapshots directory, as they contain auto-generated test artifacts. Exclude any YAML snapshot files under playwright/snapshots from code reviews in the siemens/element repository. If a YAML file is not an auto-generated snapshot, verify its origin before skipping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
📚 Learning: 2025-12-03T13:29:01.075Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1058
File: docs/components/pages/landing-page.md:34-36
Timestamp: 2025-12-03T13:29:01.075Z
Learning: In Markdown blockquotes with numbered sequences, escaping only the first number (e.g., `\1.`) is sufficient to prevent auto-numbering for the entire sequence. Subsequent numbers (2., 3., etc.) do not need individual escaping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yamlsrc/assets/sample-markdown.md
📚 Learning: 2025-12-05T08:00:38.407Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/typeahead/si-typeahead.directive.spec.ts:114-121
Timestamp: 2025-12-05T08:00:38.407Z
Learning: In the typeahead test suite (projects/element-ng/typeahead/si-typeahead.directive.spec.ts), jasmine.clock() must be installed in beforeAll and uninstalled in afterAll (not beforeEach/afterEach) because using per-test clock installation causes schedulerFunction-related issues in these specific tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-04T10:35:45.465Z
Learnt from: Killusions
Repo: siemens/element PR: 1147
File: docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md:81-84
Timestamp: 2025-12-04T10:35:45.465Z
Learning: In docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md, the Clear content section's Do's intentionally contains four identical "Delete Wittelsbacherplatz München?" entries to show that the same simple, direct question is the appropriate alternative for multiple different incorrect phrasings (overly wordy questions, generic terms, unnecessary disclaimers, and redundant words).
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
📚 Learning: 2025-12-01T14:12:11.111Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-09T14:19:26.605Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:26.605Z
Learning: In library projects (e.g., element-ng), do not list implementation dependencies for optional features in the main dependencies. Move those into devDependencies (used for demos/examples) and have consuming apps install them separately if they enable the feature. This avoids bloating library consumers with unnecessary packages and clarifies that optional features are not guaranteed to work without extra installs. If a feature is truly optional, consider documenting it and, if appropriate, using optionalDependencies to reflect optional runtime usage.
Applied to files:
package.json
🧬 Code graph analysis (8)
playwright/e2e/element-examples/static.spec.ts (1)
playwright/support/test-helpers.ts (1)
test(286-296)
src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (3)
Component(37-96)PromptCategory(11-13)PromptSuggestion(15-17)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
Component(13-42)
src/app/examples/si-chat-messages/si-user-message.ts (2)
projects/element-translate-ng/translate/si-translate.inject.ts (1)
injectSiTranslateService(11-20)projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
getMarkdownRenderer(53-287)
projects/element-ng/chat-messages/si-tool-message.component.ts (2)
projects/element-ng/chat-messages/si-chat-container.component.ts (1)
Component(40-208)projects/element-translate-ng/translate/t.ts (1)
t(38-51)
src/app/examples/si-chat-messages/si-chat-container.ts (4)
projects/element-translate-ng/translate/si-translate.inject.ts (1)
injectSiTranslateService(11-20)projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
getMarkdownRenderer(53-287)projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (2)
PromptCategory(11-13)PromptSuggestion(15-17)
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts (1)
projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)
src/app/examples/si-chat-messages/si-ai-chat-container.ts (5)
projects/element-ng/chat-messages/si-ai-chat-container.component.ts (1)
Component(74-581)projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (2)
Component(37-96)PromptSuggestion(15-17)projects/element-ng/chat-messages/si-chat-input.component.ts (1)
ChatInputAttachment(47-54)projects/element-ng/chat-messages/chat-message.model.ts (4)
ChatMessage(157-157)UserChatMessage(77-86)AiChatMessage(95-102)MessageAction(18-31)projects/element-ng/file-uploader/si-file-upload.directive.ts (1)
FileUploadError(18-21)
🪛 ast-grep (0.40.0)
projects/element-ng/markdown-renderer/markdown-renderer.ts
[warning] 87-87: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(newlinePlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 93-93: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(placeholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 94-94: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(newlinePlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 208-208: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: div.innerHTML = html
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 208-208: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: div.innerHTML = html
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
[warning] 93-93: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: containerEl.innerHTML = ''
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
⏰ 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
projects/element-ng/chat-messages/si-ai-chat-container.component.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/chat-messages/si-tool-message.component.spec.ts
Outdated
Show resolved
Hide resolved
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
3228016 to
912a98e
Compare
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
912a98e to
60b0a60
Compare
There was a problem hiding this comment.
Actionable comments posted: 14
♻️ Duplicate comments (12)
projects/element-ng/chat-messages/si-tool-message.component.spec.ts (1)
165-171: Past review comment remains valid.A previous review suggested enhancing this test to verify that the component correctly unwraps the signal value when formatting/displaying output, not just that
hasOutput()returnstrue. Consider addressing that feedback.projects/element-ng/chat-messages/si-chat-container.component.scss (1)
23-29: Remove the unnecessary::ng-deeppseudo-class.The
::ng-deep &:has(si-ai-welcome-screen)selector makes the rule global when likely not intended. Since the&refers to.chat-containerwithin the component's own template, the::ng-deepis unnecessary. Simply use&:has(si-ai-welcome-screen)to scope the styles to the component.🔎 Proposed fix
- ::ng-deep &:has(si-ai-welcome-screen) { + &:has(si-ai-welcome-screen) { inline-size: 100%; // stylelint-disable-next-line declaration-no-important padding-inline-start: 0 !important; // stylelint-disable-next-line declaration-no-important padding-inline-end: 0 !important; }projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss (1)
36-38: Refactor away from the deprecated::ng-deepselector.The
::ng-deepselector is deprecated and should be avoided. Consider using CSS custom properties, adding a CSS class directly to the button elements, or settingViewEncapsulation.Noneif cross-component styling is required.src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (2)
21-28: Mismatch betweenselectedCategoryand category labels (previously flagged).As noted in previous reviews, the
selectedCategoryis initialized to'all'but the category labels use'All prompts'. This mismatch means no category will be pre-selected initially.
30-37: Flat array format doesn't demonstrate category filtering (previously noted).As noted in previous reviews, using a flat array for
promptSuggestionsis valid but doesn't demonstrate the category filtering capability. This is acceptable for a simple example.src/app/examples/si-chat-messages/si-chat-container.ts (1)
236-252: Static prompt suggestions don't react to category changes (previously flagged).As noted in previous reviews,
filteredPromptSuggestionsis initialized as a static signal and doesn't update whenselectedCategorychanges. For demonstration purposes showing the simple pattern, this is acceptable, though acomputed()signal would better demonstrate the filtering feature.projects/element-ng/markdown-renderer/markdown-renderer.ts (2)
265-269: Document the purpose of duplicate table tag removal.This regex is complex and its purpose may not be clear to future maintainers.
342-346: Consider adding user feedback for clipboard operations.projects/element-ng/chat-messages/si-tool-message.component.ts (4)
109-121: Signal detection is fragile; preferisSignalfrom Angular core.The check
typeof data === 'function' && 'call' in datais unreliable since all functions have acallproperty. Angular providesisSignal()for this purpose.
123-130: Multiple signal reads in boolean checks; consider caching the value.
hasInputArguments()invokes the signal twice. Cache the value in a local variable.
132-142:getLoadingStatecontains dead code path.The comment on line 140 mentions showing loading for empty string output, but the method just returns
false. This appears to be leftover from incomplete logic.
144-147: Redundant type assertion ingetOutputValue.The cast
as string | object | undefinedmatches the declared return type and serves no purpose.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (11)
package-lock.jsonis excluded by!**/package-lock.jsonplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (70)
.npmrcangular.jsonapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/markdown-renderer/index.api.mdapi-goldens/element-ng/translate/index.api.mddocs/components/chat-messages/chat-message.mddocs/patterns/ai/ai-chat.mdpackage.jsonplaywright/e2e/element-examples/static.spec.tsplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yamlprojects/dashboards-demo/src/styles.scssprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/message-action.model.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-chat-message.component.scssprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/link/si-link.directive.tsprojects/element-ng/markdown-renderer/markdown-renderer-helpers.tsprojects/element-ng/markdown-renderer/markdown-renderer.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/status-bar/si-status-bar.component.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-theme/src/styles/components/_markdown-hljs-theme.scssprojects/element-theme/src/styles/components/_markdown.scssprojects/element-theme/src/styles/variables/_semantic-tokens.scssprojects/element-theme/src/theme/_theme-element.scsssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-ai-message.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.htmlsrc/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-chat-container.htmlsrc/app/examples/si-chat-messages/si-chat-container.tssrc/app/examples/si-chat-messages/si-chat-input.htmlsrc/app/examples/si-chat-messages/si-tool-message.htmlsrc/app/examples/si-chat-messages/si-tool-message.tssrc/app/examples/si-chat-messages/si-user-message.tssrc/app/examples/si-markdown-renderer/si-markdown-renderer.htmlsrc/app/examples/si-markdown-renderer/si-markdown-renderer.tssrc/assets/sample-markdown.mdsrc/styles.scss
💤 Files with no reviewable changes (3)
- projects/element-ng/status-bar/si-status-bar.component.ts
- projects/element-ng/link/si-link.directive.ts
- projects/element-ng/chat-messages/message-action.model.ts
🧰 Additional context used
🧠 Learnings (29)
📚 Learning: 2025-12-09T14:31:33.543Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50
Timestamp: 2025-12-09T14:31:33.543Z
Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.
Applied to files:
src/app/examples/si-chat-messages/si-tool-message.htmlprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scsssrc/app/examples/si-chat-messages/si-tool-message.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/si-chat-message.component.scsssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlsrc/app/examples/si-chat-messages/si-chat-container.htmlprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/si-ai-message.component.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-15T10:05:59.100Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.spec.ts
📚 Learning: 2025-12-17T04:34:55.597Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: Guideline: In Angular projects using OnPush change detection (zoneless mode), you only need to call ChangeDetectorRef.markForCheck() for asynchronous operations (e.g., setTimeout, setInterval, Promises, Observables) where a change is not automatically detected. Event handlers triggered by Angular template bindings (click, input, etc.) will trigger change detection automatically and do not require explicit markForCheck() calls. Apply this broadly to TS files within Angular components/services that use OnPush; use markForCheck() selectively for async work where change detection wouldn’t run otherwise.
Applied to files:
projects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.tssrc/app/examples/si-markdown-renderer/si-markdown-renderer.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/translate/si-translatable-keys.interface.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tssrc/app/examples/si-chat-messages/si-tool-message.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/markdown-renderer/markdown-renderer-helpers.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/chat-message.model.tssrc/app/examples/si-chat-messages/si-user-message.tssrc/app/examples/si-chat-messages/si-ai-message.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/markdown-renderer/markdown-renderer.tsprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-15T07:16:53.762Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.
Applied to files:
projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-15T07:16:32.082Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-11T10:09:01.564Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
Applied to files:
projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-08T11:25:51.584Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.
Applied to files:
projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-08T11:24:45.272Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.
Applied to files:
projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-04T11:54:31.132Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1133
File: projects/element-ng/tour/si-tour.service.spec.ts:21-26
Timestamp: 2025-12-04T11:54:31.132Z
Learning: In the siemens/element repository, all components are standalone by default and do not require the explicit `standalone: true` flag. Components should be added to the `imports` array in TestBed configuration, not the `declarations` array.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.ts
📚 Learning: 2025-12-01T04:01:27.365Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1099
File: projects/element-ng/accordion/si-accordion.component.spec.ts:39-43
Timestamp: 2025-12-01T04:01:27.365Z
Learning: With Angular 20 and esbuild, synchronous `TestBed.configureTestingModule(...).compileComponents()` calls work correctly even when components use external templates (templateUrl), because esbuild pre-compiles templates at build time. The async/await pattern is not required in this scenario.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.ts
📚 Learning: 2025-12-09T14:32:26.166Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:26.166Z
Learning: In Angular templates, prefer using nested *ngIf blocks over *ngSwitch for branching on message types within the chat-messages components. Use *ngIf with else branches to handle distinct cases and avoid complex switch logic in HTML templates. This guideline applies to all HTML templates under projects/element-ng/chat-messages.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.html
📚 Learning: 2025-12-15T07:17:06.981Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-05T08:00:38.407Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/typeahead/si-typeahead.directive.spec.ts:114-121
Timestamp: 2025-12-05T08:00:38.407Z
Learning: In the typeahead test suite (projects/element-ng/typeahead/si-typeahead.directive.spec.ts), jasmine.clock() must be installed in beforeAll and uninstalled in afterAll (not beforeEach/afterEach) because using per-test clock installation causes schedulerFunction-related issues in these specific tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-04T05:50:17.637Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-16T16:19:17.950Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1207
File: playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--data-entered.yaml:38-38
Timestamp: 2025-12-16T16:19:17.950Z
Learning: Do not review files in the playwright/snapshots directory, as they contain auto-generated test artifacts. Exclude any YAML snapshot files under playwright/snapshots from code reviews in the siemens/element repository. If a YAML file is not an auto-generated snapshot, verify its origin before skipping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yamlplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
📚 Learning: 2025-11-18T12:37:30.510Z
Learnt from: Killusions
Repo: siemens/element PR: 1040
File: projects/element-ng/chat-messages/si-chat-input.component.ts:338-349
Timestamp: 2025-11-18T12:37:30.510Z
Learning: In projects/element-ng/chat-messages/si-chat-input.component.ts, the interrupt behavior is intentionally different for button clicks vs Enter key: the button can emit interrupt even without content, but pressing Enter requires content or attachments (canSend() must be true) to emit interrupt.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.tssrc/app/examples/si-chat-messages/si-chat-input.htmlprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/chat-message.model.tssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlsrc/app/examples/si-chat-messages/si-chat-container.htmlprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-tool-message.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-09T14:19:34.846Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:34.846Z
Learning: In library projects like element-ng, optional features that are provided through callback/function parameters (e.g., syntaxHighlighter in markdown renderer) should not have their implementation dependencies (e.g., highlight.js) listed in the library's dependencies. These should remain in devDependencies for demo/example purposes, and consuming applications should install them directly if they choose to use those features.
Applied to files:
src/app/examples/si-markdown-renderer/si-markdown-renderer.ts
📚 Learning: 2025-12-09T14:33:54.441Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: src/app/examples/si-chat-messages/si-ai-message.ts:24-43
Timestamp: 2025-12-09T14:33:54.441Z
Learning: In src/app/examples/ (example/demo code) directories, allow and expect code duplication. Treat duplication as acceptable for demonstration code that aims to illustrate usage rather than enforce DRY. Do not enforce refactoring to remove duplication in example files; focus on readability and clarity of examples. This applies to all TypeScript files under src/app/examples (including nested subdirectories like si-chat-messages).
Applied to files:
src/app/examples/si-markdown-renderer/si-markdown-renderer.tssrc/app/examples/si-chat-messages/si-chat-container.tssrc/app/examples/si-chat-messages/si-tool-message.tssrc/app/examples/si-chat-messages/si-user-message.tssrc/app/examples/si-chat-messages/si-ai-message.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-22T13:04:20.883Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: src/app/examples/ag-grid/ag-grid-empty-state.ts:20-24
Timestamp: 2025-12-22T13:04:20.883Z
Learning: The SiEmptyStateComponent in siemens/element-ng accepts icon names in kebab-case format (e.g., 'element-technical-operator') that may not be directly exported as constants in the element-icons.ts file. Do not flag these as errors if they render correctly at runtime.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
📚 Learning: 2025-12-22T13:21:01.053Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/provider.ts:74-81
Timestamp: 2025-12-22T13:21:01.053Z
Learning: In the siemens/element repository, configuration providers use custom string tokens with useValue for consistency (e.g., provideSiDatatableConfig uses { provide: 'configuration', useValue: {...} }). The AG Grid provider follows this same pattern with { provide: 'ag-grid-options', useValue: provideGlobalGridOptions({...}) }.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.ts
📚 Learning: 2025-12-09T14:32:34.036Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:34.036Z
Learning: In projects/element-ng/chat-messages, nested if blocks are preferred over switch statements for branching on message types in Angular templates.
Applied to files:
projects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/si-chat-message.component.scsssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlsrc/app/examples/si-chat-messages/si-chat-container.htmlprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-ai-message.component.tsapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-08T11:25:20.861Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-01T14:12:11.111Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-22T13:29:31.048Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/parts/color-scheme.part.ts:35-35
Timestamp: 2025-12-22T13:29:31.048Z
Learning: In the Element design system (projects/element-ng/theme and projects/element-theme), only `--element-body-font-family` is exposed as a CSS custom property for typography. Font sizes are NOT exposed as CSS custom properties; they are defined using internal SCSS variables (e.g., `typography.$si-font-size-body`) that compile to fixed values. Using hardcoded pixel values for fontSize in AG Grid theme configuration (e.g., `fontSize: '14px'`) is the correct approach.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/dashboards-demo/src/styles.scss
📚 Learning: 2025-12-04T10:35:45.465Z
Learnt from: Killusions
Repo: siemens/element PR: 1147
File: docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md:81-84
Timestamp: 2025-12-04T10:35:45.465Z
Learning: In docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md, the Clear content section's Do's intentionally contains four identical "Delete Wittelsbacherplatz München?" entries to show that the same simple, direct question is the appropriate alternative for multiple different incorrect phrasings (overly wordy questions, generic terms, unnecessary disclaimers, and redundant words).
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
📚 Learning: 2025-12-17T14:01:05.705Z
Learnt from: dauriamarco
Repo: siemens/element PR: 908
File: projects/element-ng/side-panel/si-side-panel.component.ts:70-74
Timestamp: 2025-12-17T14:01:05.705Z
Learning: In the Element side-panel component (projects/element-ng/side-panel/si-side-panel.component.ts), the `xxxlMinimum` breakpoint (1920px) is intentionally hardcoded as a private static constant rather than being part of the configurable `Breakpoints` interface. This design preserves full Bootstrap compatibility (which only defines breakpoints up to xxl/1400px) while allowing Element to handle ultra-wide screens explicitly without affecting the standard breakpoint configuration.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-chat-container.component.scss
📚 Learning: 2025-12-03T13:29:01.075Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1058
File: docs/components/pages/landing-page.md:34-36
Timestamp: 2025-12-03T13:29:01.075Z
Learning: In Markdown blockquotes with numbered sequences, escaping only the first number (e.g., `\1.`) is sufficient to prevent auto-numbering for the entire sequence. Subsequent numbers (2., 3., etc.) do not need individual escaping.
Applied to files:
src/assets/sample-markdown.mdplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
📚 Learning: 2025-12-09T14:19:26.605Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:26.605Z
Learning: In library projects (e.g., element-ng), do not list implementation dependencies for optional features in the main dependencies. Move those into devDependencies (used for demos/examples) and have consuming apps install them separately if they enable the feature. This avoids bloating library consumers with unnecessary packages and clarifies that optional features are not guaranteed to work without extra installs. If a feature is truly optional, consider documenting it and, if appropriate, using optionalDependencies to reflect optional runtime usage.
Applied to files:
package.json
🧬 Code graph analysis (8)
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts (1)
projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)
src/app/examples/si-chat-messages/si-chat-container.ts (4)
projects/element-translate-ng/translate/si-translate.inject.ts (1)
injectSiTranslateService(11-20)projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
getMarkdownRenderer(69-402)projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (2)
PromptCategory(11-13)PromptSuggestion(15-17)
playwright/e2e/element-examples/static.spec.ts (1)
playwright/support/test-helpers.ts (1)
test(286-296)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (2)
src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
Component(13-42)src/app/examples/si-chat-messages/si-chat-container.ts (1)
Component(43-369)
src/app/examples/si-chat-messages/si-user-message.ts (2)
projects/element-translate-ng/translate/si-translate.inject.ts (1)
injectSiTranslateService(11-20)projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
getMarkdownRenderer(69-402)
src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (3)
Component(37-96)PromptCategory(11-13)PromptSuggestion(15-17)
projects/element-ng/chat-messages/si-tool-message.component.ts (1)
projects/element-translate-ng/translate/t.ts (1)
t(38-51)
src/app/examples/si-chat-messages/si-ai-chat-container.ts (5)
projects/element-ng/chat-messages/si-ai-chat-container.component.ts (1)
Component(74-581)projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (2)
Component(37-96)PromptSuggestion(15-17)projects/element-ng/chat-messages/si-chat-input.component.ts (1)
ChatInputAttachment(47-54)projects/element-ng/chat-messages/chat-message.model.ts (4)
ChatMessage(157-157)UserChatMessage(77-86)AiChatMessage(95-102)MessageAction(18-31)projects/element-ng/file-uploader/si-file-upload.directive.ts (1)
FileUploadError(18-21)
🪛 ast-grep (0.40.3)
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
[warning] 108-108: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: tempDiv.innerHTML = createHtml()
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 108-108: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: tempDiv.innerHTML = createHtml()
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
projects/element-ng/markdown-renderer/markdown-renderer.ts
[warning] 116-116: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(newlinePlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 122-122: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(placeholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 123-123: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(newlinePlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 284-284: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: div.innerHTML = html
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 284-284: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: div.innerHTML = html
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 734-734: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(placeholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 738-738: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(escapedDollarPlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
[warning] 106-106: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: containerEl.innerHTML = ''
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
⏰ 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
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
Show resolved
Hide resolved
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
Outdated
Show resolved
Hide resolved
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
60b0a60 to
252d106
Compare
There was a problem hiding this comment.
Actionable comments posted: 11
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
docs/patterns/ai/ai-chat.md (1)
137-137: Clarify slot naming syntax.The slot naming in line 137 uses slash notation (
si-chat-input/siChatContainerInput) without clear explanation. Developers may not understand whether this represents two separate slots, an alternative name, or a hierarchical relationship.🔎 Suggested improvement
Clarify the slot and directive relationship:
- `si-chat-input` with directive `siChatContainerInput` -> For the input (whether default or custom).Or, if they are aliases, explicitly state that:
- `si-chat-input` (or `siChatContainerInput` helper directive) -> For the input (whether default or custom).projects/element-ng/chat-messages/index.ts (1)
5-17: LGTM with minor ordering suggestion.The new exports correctly expose the AI chat components and consolidated chat-message model. The alphabetical ordering of exports is broken by the new additions at lines 14-17 (si-tool-message, si-ai-chat-container, si-ai-welcome-screen appear after si-user-message).
Consider reordering for consistency:
🔎 Suggested reordering
export * from './chat-message.model'; +export * from './si-ai-chat-container.component'; export * from './si-ai-message.component'; +export * from './si-ai-welcome-screen.component'; export * from './si-attachment-list.component'; export * from './si-chat-container.component'; export * from './si-chat-container-input.directive'; export * from './si-chat-input.component'; export * from './si-chat-input-disclaimer.directive'; export * from './si-chat-message-action.directive'; export * from './si-chat-message.component'; -export * from './si-tool-message.component'; +export * from './si-tool-message.component'; export * from './si-user-message.component'; -export * from './si-ai-chat-container.component'; -export * from './si-ai-welcome-screen.component';
♻️ Duplicate comments (20)
projects/element-ng/chat-messages/si-tool-message.component.spec.ts (1)
165-171: Consider strengthening the signal output test.As noted in a previous review, this test verifies that
hasOutput()returnstruewhen a signal is provided, but it doesn't verify that the component correctly unwraps and uses the signal value when formatting or displaying the output.🔎 Suggested enhancement
it('should handle signal output', () => { const outputSignal = signal('{"result": 20}'); fixture.componentRef.setInput('output', outputSignal); fixture.detectChanges(); expect((component as any).hasOutput()).toBe(true); + // Verify signal value is correctly unwrapped + const formatted = (component as any).formatData(outputSignal()); + expect(formatted).toBe('{"result": 20}'); });projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts (1)
108-110: Null reference risk whencreateHtml()returns empty or text-only content.
tempDiv.firstElementChildcan benullifcreateHtml()returns an empty string or text-only content without element nodes. The type assertionas HTMLElementmasks this, causing runtime errors when downstream code accesses properties on a null value.The XSS and null reference concerns raised in past reviews remain unaddressed. The JSDoc security warning and null check should be added.
projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
326-347: Event listeners attached without cleanup - potential memory leak.Per past review, event listeners are attached to each
.copy-code-btnelement but never removed. When the returneddivis removed from the DOM, these listeners persist. Consider using event delegation on the container instead.projects/element-ng/chat-messages/si-chat-container.component.scss (2)
23-29: Remove the unnecessary::ng-deeppseudo-class.The
::ng-deepis not needed with:has()since it naturally checks for descendant elements. This unnecessarily breaks component style encapsulation.🔎 Proposed fix
- ::ng-deep &:has(si-ai-welcome-screen) { + &:has(si-ai-welcome-screen) { inline-size: 100%; // stylelint-disable-next-line declaration-no-important padding-inline-start: 0 !important; // stylelint-disable-next-line declaration-no-important padding-inline-end: 0 !important; }
47-53: Remove unnecessary::ng-deepfrom messages-container selectors.The
:has()pseudo-class already checks for descendant elements, so::ng-deepis redundant and breaks component scoping.🔎 Proposed fix
- ::ng-deep &:not(:has(si-ai-welcome-screen)) { + &:not(:has(si-ai-welcome-screen)) { max-inline-size: 720px; } - ::ng-deep &:has(si-ai-welcome-screen) { + &:has(si-ai-welcome-screen) { inline-size: 100%; }src/app/examples/si-chat-messages/si-ai-welcome-screen.html (1)
8-9: Consider using i18n for consistency.The hardcoded English text could use translation keys to demonstrate best practices, as other parts of the example use the translate pipe.
projects/element-ng/chat-messages/si-ai-welcome-screen.component.html (1)
11-17: Consider tracking by a stable identifier.This concern was raised in a previous review - using
track $indexcan cause unnecessary re-renders if categories are reordered.src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
21-28: Potential mismatch betweenselectedCategoryand category labels.This concern was raised in a previous review -
selectedCategoryis initialized to'all'but the categories array uses{ label: 'All prompts' }, causing a mismatch sinceonCategoryClickuses the label property.projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
11-17: Consider adding anidfield toPromptCategory.The JSDoc at line 52-53 references "category ID" but the interface only has
label. The component useslabelas both the display text and identifier (line 90), which can cause confusion.src/app/examples/si-chat-messages/si-chat-container.ts (1)
243-252:filteredPromptSuggestionsdoes not update whenselectedCategorychanges.The signal is initialized statically with
allPromptSuggestionsbut never reacts to category selection. If filtering is intended, use acomputedsignal.🔎 Suggested implementation if filtering is intended
- readonly filteredPromptSuggestions = signal<PromptSuggestion[]>(this.allPromptSuggestions); + readonly filteredPromptSuggestions = computed(() => { + const category = this.selectedCategory(); + if (!category || category === 'all') { + return this.allPromptSuggestions; + } + // Add category-based filtering logic here + return this.allPromptSuggestions; + });If this is intentionally static for demonstration purposes, consider adding a clarifying comment.
projects/element-ng/chat-messages/si-tool-message.component.ts (4)
109-121: Signal detection is fragile; preferisSignalfrom Angular core.The check
typeof data === 'function' && 'call' in datais unreliable since all functions have acallproperty. Use Angular'sisSignal()utility instead.🔎 Proposed fix
-import { Component, input, Signal, booleanAttribute } from '@angular/core'; +import { Component, input, Signal, booleanAttribute, isSignal } from '@angular/core'; ... protected formatData(data: string | object | Signal<string | object> | undefined): string { if (data === undefined || data === null) return ''; - const unwrappedData = - typeof data === 'function' && 'call' in data ? (data as Signal<string | object>)() : data; + const unwrappedData = isSignal(data) ? data() : data; ... }
123-130: Cache signal values to avoid redundant reads.
hasInputArguments()readsthis.inputArguments()twice. While not critical, caching improves clarity.🔎 Proposed fix
protected hasInputArguments(): boolean { - return this.inputArguments() !== undefined && this.inputArguments() !== null; + const value = this.inputArguments(); + return value !== undefined && value !== null; }
132-142: Remove dead code path or implement the documented behavior.The comment on line 140 mentions showing loading for empty string output, but the method just returns
false. Either implement this behavior or remove the misleading comment.🔎 Suggested cleanup
protected getLoadingState(): boolean { - const loadingValue = this.loading(); - - // If explicitly loading - if (loadingValue) { - return true; - } - - // If output is empty string (not undefined), show loading - return false; + return this.loading(); }
144-147: Remove redundant type assertion.The cast
as string | object | undefinedmatches the declared return type and serves no purpose.🔎 Proposed simplification
protected getOutputValue(): string | object | undefined { - const outputValue = this.output(); - return outputValue as string | object | undefined; + return this.output(); }projects/element-ng/chat-messages/si-chat-input.component.ts (1)
147-155: Breaking change:sendingandinterruptibleno longer coerce non-boolean values.This was previously flagged. The change from
input(false, { transform: booleanAttribute })tomodel(false)removes automatic coercion of string values like"true"to boolean. Since the component is marked@experimental, this is acceptable.projects/element-ng/chat-messages/chat-message.model.ts (1)
18-31: Consider typing the action parameter more specifically.The
actioncallback usesanyfor its first parameter. This was previously flagged—consider usingunknownfor better type safety.src/app/examples/si-chat-messages/si-ai-chat-container.ts (2)
255-259: Loose typing onmessagesSignalparameter.This was previously flagged. Using
anyloses type safety. ConsiderWritableSignal<ChatMessage[]>for better documentation in example code.
262-279: NestedsetTimeoutcalls lack cleanup on component destroy.This was previously flagged. If the component is destroyed mid-simulation, these timeouts will still fire. Consider adding
ngOnDestroyfor lifecycle cleanup, or add a comment noting this simplification.projects/element-ng/chat-messages/si-ai-chat-container.component.ts (2)
110-116:messageVersionsWeakMap is never updated, breaking cache invalidation.This was previously flagged. The
messageVersions.get()on line 408 always returnsundefined(defaulting to0) sincemessageVersions.set()is never called. This means the cache on line 412 will always match on version, preventing invalidation when message actions change.
464-480: Type assertion ingetContentValuereturns empty string for falsy content.The function returns
'' as Twhen content is falsy, butTcould beobject. This type assertion is technically unsafe for object types. However, in practice, the callers use this for string content, so the runtime behavior is correct.🔎 Consider a more type-safe approach
- protected getContentValue<T extends string | object>(content: T | Signal<T> | undefined): T { - if (!content) return '' as T; - return isSignal(content) ? (content as Signal<T>)() : content; + protected getContentValue<T extends string | object>(content: T | Signal<T> | undefined): T | '' { + if (!content) return ''; + return isSignal(content) ? (content as Signal<T>)() : content; }Or use function overloads for string vs object content.
projects/element-ng/chat-messages/si-ai-chat-container.component.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/chat-messages/si-attachment-list.component.ts
Outdated
Show resolved
Hide resolved
|
Documentation. Coverage Reports: |
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
252d106 to
33d9fb0
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (4)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.html (1)
1-33: Template structure is well-organized.The component template correctly implements:
- Content projection via
<ng-content />for the welcome header- Conditional rendering for categories and suggestions using Angular's new control flow syntax
- Proper event binding for category and prompt selection
Note: Previous review comments already addressed the
track $indexoptimization (considertrack category.label) and thetext-whitecontrast issue. Please address those recommendations.docs/patterns/ai/ai-chat.md (1)
89-101: Documentation improvements needed.The documentation is helpful but has clarity issues already noted in previous reviews:
- Line 89: The fixed height requirement phrasing could be clearer
- Lines 95-97: The relationship between "built-in" and "slotted" is ambiguous
Please address the previous review suggestions to clarify whether
si-ai-welcome-screenis automatically included or optionally slotted.src/app/examples/si-chat-messages/si-ai-chat-container.html (1)
36-42: Empty button content—add visible close icon.The close button is empty between its tags. While the
element-cancelclass may provide styling, the button should contain an explicit icon element for proper rendering and accessibility.🔎 Proposed fix
<button type="button" class="btn btn-circle btn-sm btn-ghost element-cancel" aria-label="Close modal" (click)="modalRef.hide('cancel')" > + <si-icon icon="element-cancel" /> </button>projects/element-ng/chat-messages/si-ai-chat-container.component.ts (1)
110-116:messageVersionsWeakMap is never updated, preventing cache invalidation.The caching mechanism retrieves a version from
messageVersions(line 421) but never callsmessageVersions.set()to update it. This means:
- The version always defaults to
0- Once cached with
version: 0, the check on line 425 always passes- Message actions cannot be invalidated when they change
🔎 Proposed fix
When creating or updating the cache entry, increment and store the version:
private getMessageActions(message: ChatMessage): { primary: MessageAction[]; secondary: MenuItem[]; version: number; } { if (this.isTemplateMessage(message) || message.type === 'tool') { return { primary: [], secondary: [], version: 0 }; } const actions = message.actions ?? []; - // Get or create version number for this message - const version = this.messageVersions.get(message) ?? 0; + // Get current version and increment for new cache entry + const currentVersion = this.messageVersions.get(message) ?? 0; + const version = currentVersion + 1; // Check if we have a cached version that matches const cached = this.messageActionsCache.get(message); - if (cached?.version === version) { + if (cached?.version === currentVersion) { return cached; } // Build primary and secondary actions const primary = actions.slice(0, 3); const secondary = actions.slice(3).map( action => ({ ...action, action: action.action as unknown as (actionParam: any, source: MenuItem) => void, type: 'action' }) as MenuItem ); const result = { primary, secondary, version }; this.messageActionsCache.set(message, result); + this.messageVersions.set(message, version); // Return the cached object to maintain reference equality return result; }Also applies to: 409-445
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (12)
api-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/translate/index.api.mddocs/patterns/ai/ai-chat.mdplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/translate/si-translatable-keys.interface.tssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.ts
🧰 Additional context used
🧠 Learnings (23)
📚 Learning: 2025-12-09T14:31:33.543Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50
Timestamp: 2025-12-09T14:31:33.543Z
Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-09T14:32:26.166Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:26.166Z
Learning: In Angular templates, prefer using nested *ngIf blocks over *ngSwitch for branching on message types within the chat-messages components. Use *ngIf with else branches to handle distinct cases and avoid complex switch logic in HTML templates. This guideline applies to all HTML templates under projects/element-ng/chat-messages.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.html
📚 Learning: 2025-11-18T12:37:30.510Z
Learnt from: Killusions
Repo: siemens/element PR: 1040
File: projects/element-ng/chat-messages/si-chat-input.component.ts:338-349
Timestamp: 2025-11-18T12:37:30.510Z
Learning: In projects/element-ng/chat-messages/si-chat-input.component.ts, the interrupt behavior is intentionally different for button clicks vs Enter key: the button can emit interrupt even without content, but pressing Enter requires content or attachments (canSend() must be true) to emit interrupt.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-11T10:09:01.564Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-15T07:16:53.762Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-15T07:16:32.082Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-08T11:25:51.584Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-15T07:17:06.981Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-08T11:25:20.861Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-01T14:12:11.111Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-15T10:05:59.100Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-17T04:34:55.597Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: Guideline: In Angular projects using OnPush change detection (zoneless mode), you only need to call ChangeDetectorRef.markForCheck() for asynchronous operations (e.g., setTimeout, setInterval, Promises, Observables) where a change is not automatically detected. Event handlers triggered by Angular template bindings (click, input, etc.) will trigger change detection automatically and do not require explicit markForCheck() calls. Apply this broadly to TS files within Angular components/services that use OnPush; use markForCheck() selectively for async work where change detection wouldn’t run otherwise.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/translate/si-translatable-keys.interface.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-16T16:19:17.950Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1207
File: playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--data-entered.yaml:38-38
Timestamp: 2025-12-16T16:19:17.950Z
Learning: Do not review files in the playwright/snapshots directory, as they contain auto-generated test artifacts. Exclude any YAML snapshot files under playwright/snapshots from code reviews in the siemens/element repository. If a YAML file is not an auto-generated snapshot, verify its origin before skipping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yaml
📚 Learning: 2025-12-23T09:24:35.163Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/translate/index.api.md:12-84
Timestamp: 2025-12-23T09:24:35.163Z
Learning: In the siemens/element repository, do not review files under the api-goldens/ directory (e.g., api-goldens/**/index.api.md) since they are auto-generated by API Extractor. Exclude these from review checks and focus on source files that are not auto-generated.
Applied to files:
api-goldens/element-ng/translate/index.api.mdapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-23T09:24:57.843Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/index.api.md:324-325
Timestamp: 2025-12-23T09:24:57.843Z
Learning: Do not review files in the api-goldens directory, as they are auto-generated API reports produced by API Extractor.
Applied to files:
api-goldens/element-ng/translate/index.api.mdapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-23T09:24:40.395Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/module-federation/index.api.md:7-11
Timestamp: 2025-12-23T09:24:40.395Z
Learning: In the siemens/element repository, do not review any files under the api-goldens directory, as they are auto-generated API reports produced by API Extractor. These MD files should be excluded from review unless explicitly overridden.
Applied to files:
api-goldens/element-ng/translate/index.api.mdapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-09T14:32:34.036Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:34.036Z
Learning: In projects/element-ng/chat-messages, nested if blocks are preferred over switch statements for branching on message types in Angular templates.
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.htmlapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-11T14:44:11.278Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1185
File: projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.html:11-11
Timestamp: 2025-12-11T14:44:11.278Z
Learning: The si-icon component in siemens/element-ng/icon automatically applies aria-hidden="true" to its content. Do not suggest adding aria-hidden="true" to si-icon elements, as accessibility is already handled internally by the component.
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.html
📚 Learning: 2025-12-22T13:04:20.883Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: src/app/examples/ag-grid/ag-grid-empty-state.ts:20-24
Timestamp: 2025-12-22T13:04:20.883Z
Learning: The SiEmptyStateComponent in siemens/element-ng accepts icon names in kebab-case format (e.g., 'element-technical-operator') that may not be directly exported as constants in the element-icons.ts file. Do not flag these as errors if they render correctly at runtime.
Applied to files:
projects/element-ng/translate/si-translatable-keys.interface.tsapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-08T11:24:45.272Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-04T05:50:17.637Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-09T14:33:54.441Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: src/app/examples/si-chat-messages/si-ai-message.ts:24-43
Timestamp: 2025-12-09T14:33:54.441Z
Learning: In src/app/examples/ (example/demo code) directories, allow and expect code duplication. Treat duplication as acceptable for demonstration code that aims to illustrate usage rather than enforce DRY. Do not enforce refactoring to remove duplication in example files; focus on readability and clarity of examples. This applies to all TypeScript files under src/app/examples (including nested subdirectories like si-chat-messages).
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.ts
🧬 Code graph analysis (1)
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts (1)
projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)
⏰ 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
🔇 Additional comments (12)
projects/element-ng/translate/si-translatable-keys.interface.ts (1)
6-8: New translatable keys follow established conventions.The new keys for AI chat container, markdown renderer, and tool message components are correctly added:
- Alphabetically ordered within their component groups
- Follow the
SI_COMPONENT.ACTIONnaming convention- Properly defined as optional strings
Also applies to: 171-172, 222-223
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
66-82: Well-implemented filtering logic with appropriate type handling.The
filteredPromptSuggestionscomputed property correctly handles both input types:
- Returns array as-is when
promptSuggestionsis an array- Returns category-specific suggestions when a category is selected
- Falls back to flattened suggestions when no category is selected
The logic is clean and handles edge cases properly.
docs/patterns/ai/ai-chat.md (1)
112-124: Code examples are well-structured.The TypeScript examples clearly demonstrate both usage patterns:
- Simple array for flat suggestions
- Record with categories for grouped suggestions
This provides good developer guidance.
projects/element-ng/chat-messages/si-ai-chat-container.component.html (2)
19-67: Message rendering follows established patterns.The implementation correctly:
- Uses
track messagefor object identity tracking (per project guidelines)- Uses nested
@ifblocks instead of@switchfor message type branching (per project guidelines)- Properly handles template messages via
ngTemplateOutlet- Separates user, AI, and tool message rendering with appropriate bindings
Based on learnings, this approach is correct for the chat-messages components.
70-78: Status notification rendering is correct.The conditional check
@if (statusSeverity() && statusMessage())ensures both values are present before rendering, and the non-null assertions are safe within this guard.src/app/examples/si-chat-messages/si-ai-chat-container.html (1)
1-30: Example demonstrates comprehensive feature usage.The example showcases:
- Status notifications
- Multiple input bindings (placeholder, disclaimer, attachments)
- Event handling (send, interrupt, fileError)
- Prompt suggestions integration
This provides good reference for consumers of the component.
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yaml (1)
1-30: Auto-generated snapshot file - skipping review.Per project guidelines, Playwright snapshot files in
playwright/snapshots/are auto-generated test artifacts and should not be manually reviewed.projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts (4)
20-30: Test setup follows zoneless Angular patterns correctly.The test configuration properly uses:
provideZonelessChangeDetection()for zoneless testingprovideNoopAnimations()for animation handling- Standard
TestBed.configureTestingModulepatternThis aligns with the project's testing conventions.
460-500: Action caching tests validate important optimization.The tests for action handling (lines 460-500) properly verify:
- Primary/secondary action splitting when more than 3 actions exist
- Caching behavior for memoization
This ensures consistent behavior and performance for message actions.
1-501: Comprehensive test coverage for the new component.The test suite provides excellent coverage including:
- Default state verification
- Message type rendering (user, AI, tool)
- Welcome screen behavior
- Loading and interrupting states
- Signal content handling and updates
- Action caching and splitting
- Input propagation to child components
Well-structured tests that follow project patterns.
121-136: Remove unnecessarycontentproperty from tool message test.The
contentproperty is optional in theToolChatMessageinterface (inherited fromBaseChatMessage), so thecontent: ''assignment on line 127 is redundant and can be removed.src/app/examples/si-chat-messages/si-ai-chat-container.ts (1)
1-299: Example code demonstrates AI chat container usage effectively.The component provides a clear demonstration of:
- Syntax highlighting and LaTeX rendering integration
- Message state management with signals
- Prompt suggestions and categorization
- Action handlers and UI state toggles
- Simulated AI response flow
The
messagesSignaltyping issue from previous reviews has been resolved (line 256). The nestedsetTimeoutcalls insimulateAiResponse(lines 280-297) lack lifecycle cleanup, but this simplification is acceptable for demonstration purposes.
projects/element-ng/chat-messages/si-ai-chat-container.component.html
Outdated
Show resolved
Hide resolved
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
2 times, most recently
from
ff44574 to
6ec8dde
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (31)
projects/element-ng/chat-messages/si-chat-container.component.scss (2)
23-29: Remove unnecessary::ng-deepfrom this selector.The
::ng-deep &:has(si-ai-welcome-screen)pattern is unnecessary and potentially problematic. The:has()pseudo-class naturally checks for descendant elements, and prepending::ng-deepto the parent reference&can leak styles globally.🔎 Proposed fix
- ::ng-deep &:has(si-ai-welcome-screen) { + &:has(si-ai-welcome-screen) { inline-size: 100%; // stylelint-disable-next-line declaration-no-important padding-inline-start: 0 !important; // stylelint-disable-next-line declaration-no-important padding-inline-end: 0 !important; }
47-53: Remove unnecessary::ng-deepfrom messages-container selectors.Same issue as above:
::ng-deepbefore&:has()and&:not(:has())is unnecessary and can cause style leakage.🔎 Proposed fix
- ::ng-deep &:not(:has(si-ai-welcome-screen)) { + &:not(:has(si-ai-welcome-screen)) { max-inline-size: 720px; } - ::ng-deep &:has(si-ai-welcome-screen) { + &:has(si-ai-welcome-screen) { inline-size: 100%; }src/app/examples/si-chat-messages/si-ai-welcome-screen.html (1)
8-9: Consider using i18n for consistency.The welcome text is hardcoded in English. For consistency with the library component templates that use the translate pipe and to demonstrate best practices in examples, consider making these strings translatable.
🔎 Suggested approach
- <p class="h1 mb-0 text-white"> <strong>Hello</strong>, </p> - <p class="h1 mb-0 text-white">how can I help you today?</p> + <p class="h1 mb-0 text-white"> <strong>{{ 'EXAMPLE.HELLO' | translate }}</strong>, </p> + <p class="h1 mb-0 text-white">{{ 'EXAMPLE.HOW_CAN_I_HELP' | translate }}</p>docs/patterns/ai/ai-chat.md (2)
95-101: Clarify welcome screen architecture.The text describes the welcome screen as both "built-in" and "can be slotted," which creates ambiguity about whether it's required or optional.
🔎 Suggested clarification
If the welcome screen is optional:
-The AI chat container includes a built-in initial welcome screen component that displays when there are no messages. It can be slotted into the **si-chat-container** component. It accepts prompt suggestions as an input. +The AI chat container includes a default initial welcome screen that displays when there are no messages. You can customize or replace it by providing your own si-ai-welcome-screen component via the default slot. It accepts prompt suggestions as an input.If the welcome screen is always present:
-The AI chat container includes a built-in initial welcome screen component that displays when there are no messages. It can be slotted into the **si-chat-container** component. It accepts prompt suggestions as an input. +The si-ai-chat-container automatically includes the si-ai-welcome-screen component as its initial state, displaying when there are no messages. It accepts prompt suggestions as an input.
89-93: Clarify fixed height requirement.The phrasing "it should be inserted into a layout with fixed height, if no fixed height is provided, please set a height in pixels" is somewhat unclear. Consider rewording for clarity.
🔎 Suggested improvement
-The **si-ai-chat-container** component provides a complete AI chat interface, it should be inserted into a layout with fixed height, if no fixed height is provided, please set a height in pixels. +The **si-ai-chat-container** component provides a complete AI chat interface with an integrated welcome screen. It requires a fixed height constraint; if the parent layout does not provide one, explicitly set the component height in pixels.projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss (1)
37-39:::ng-deepis deprecated.This was flagged in a previous review. Consider the alternatives mentioned there (CSS custom properties,
ViewEncapsulation.None, or exposing component inputs).src/app/examples/si-chat-messages/si-ai-chat-container.html (1)
36-42: Empty close button still lacks visible content.This was flagged in a previous review. The button between lines 36-42 has no visible icon or text content—only the
element-cancelclass. Add an icon element or visible content for proper rendering.projects/element-ng/chat-messages/si-ai-welcome-screen.component.html (3)
11-11: Consider tracking by a stable identifier.The loop uses
track $index, which can cause unnecessary re-renders if categories are reordered. Considertrack category.labelfor more stable tracking, assuming labels are unique.
25-25: Replace hardcodedtext-whitewith theme-aware text color.The
text-whiteclass creates poor contrast in light themes where the action card background is light. Remove thetext-whiteclass to inherit the card's default text color handling, which automatically adjusts for theme.🔎 Proposed fix
- <div body class="card-body card-text text-white"> + <div body class="card-body card-text">
23-23: Consider tracking suggestions by a stable identifier.Similar to the categories loop, using
track $indexfor suggestions can cause unnecessary re-renders if the array is reordered. If suggestions have a unique identifier (e.g.,idortext), consider tracking by that property instead.projects/element-ng/chat-messages/si-ai-chat-container.component.html (1)
10-13: Replace hardcodedtext-whitewith theme-aware text color.The hardcoded
text-whiteclass may create poor contrast in light themes. Remove the class to ensure proper contrast across all themes, or ensure the parent container guarantees a dark background in all themes.🔎 Proposed fix
- <p class="h1 mb-0 text-white"> + <p class="h1 mb-0"> <strong>{{ greeting() | translate }}</strong> </p> - <p class="h1 mb-0 text-white">{{ welcomeMessage() | translate }}</p> + <p class="h1 mb-0">{{ welcomeMessage() | translate }}</p>projects/element-ng/chat-messages/si-tool-message.component.scss (2)
15-17: Usage of::ng-deepfor child component styling.While
::ng-deepis deprecated, it remains necessary for styling encapsulated child components until Angular provides stable alternatives. The usage here for adjusting spinner size is appropriate.
77-97: Usage of::ng-deepfor collapsible panel styling.Similar to the spinner styling,
::ng-deepis used here to adjust internal collapsible panel structure. This is an acceptable pattern until Angular provides alternatives for styling encapsulated children.projects/element-ng/chat-messages/si-tool-message.component.spec.ts (1)
165-171: Strengthen the signal output test.The test verifies
hasOutput()returnstruewhen a signal is provided, but doesn't verify that the component correctly unwraps the signal value when formatting/displaying output.🔎 Suggested enhancement
it('should handle signal output', () => { const outputSignal = signal('{"result": 20}'); fixture.componentRef.setInput('output', outputSignal); fixture.detectChanges(); expect((component as any).hasOutput()).toBe(true); + // Verify signal value is correctly unwrapped + const formatted = (component as any).formatData(outputSignal()); + expect(formatted).toBe('{"result": 20}'); });src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (2)
21-28: Potential mismatch betweenselectedCategoryand category labels.The
selectedCategorysignal is initialized to'all', butpromptCategoriescontains{ label: 'All prompts' }. SinceonCategoryClick(in the component being demonstrated) setsselectedCategoryusing the category'slabelproperty, the initial value'all'won't match any category label.🔎 Suggested alignment
Option 1: Initialize to match the label:
- readonly selectedCategory = signal<string>('all'); + readonly selectedCategory = signal<string>('All prompts');Option 2: Use undefined for no initial selection:
- readonly selectedCategory = signal<string>('all'); + readonly selectedCategory = signal<string | undefined>(undefined);
30-37: Consider demonstrating category-based filtering in the example.The
promptSuggestionsuses a flat array format, which doesn't showcase theSiAiWelcomeScreenComponent's category filtering feature. Consider using theRecord<string, PromptSuggestion[]>format to better demonstrate this capability.This is optional as the example may intentionally show the simple array format.
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts (1)
186-228: Consider testing internal computed signals through observable behavior.Multiple tests access internal computed signals via
(component as any)type casting (e.g.,inputInterruptible(),inputSending()). While functional, this bypasses TypeScript safety and couples tests to private implementation details.Consider:
- Testing the observable effects these signals drive (e.g., input component state, UI elements)
- Exposing these as public test-only getters if they represent important component behavior
This is a minor suggestion; the current approach is functional.
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
11-17: Past feedback still applies: Consider adding anidfield toPromptCategory.The
PromptCategoryinterface useslabelfor both display and identification. As noted in the past review, the example code showsselectedCategoryinitialized to'all'while categories use labels like'All prompts', which creates potential confusion.projects/element-ng/markdown-renderer/markdown-renderer.ts (3)
326-347: Event delegation would be cleaner, but current approach is not a true memory leak.The past review suggested event delegation to avoid memory leaks. While the current per-button listener approach is not ideal, it's not a true memory leak: when the containing
divis removed from the DOM, the buttons and their listeners become unreachable and will be garbage collected. Event delegation on the containerdivwould still be a cleaner pattern, as suggested previously.
265-269: Document the purpose of duplicate table tag removal.As noted in the past review, this complex regex that removes duplicate table tags would benefit from a brief comment explaining when this situation occurs (e.g., adjacent table rows can cause nested table wrappers).
427-429: Temp closing marker could theoretically collide with user content.As noted previously, the static
--TEMP-CLOSE--marker could appear in user content. Consider using a unique marker with a random component like other placeholders.src/app/examples/si-chat-messages/si-chat-container.ts (1)
243-252:filteredPromptSuggestionsremains static despiteselectedCategorychanges.As noted in the past review,
filteredPromptSuggestionsis initialized with all suggestions but never updates whenselectedCategorychanges. If category-based filtering is intended for this demo, consider using acomputedsignal. If this is intentionally simplified for demonstration purposes, a comment would clarify the intent.projects/element-ng/chat-messages/si-tool-message.component.ts (4)
109-121: Signal detection is fragile; preferisSignalfrom Angular core.As noted in the past review, the check
typeof data === 'function' && 'call' in datais unreliable since all functions have acallproperty. Angular providesisSignal()for this purpose.🔎 Proposed fix
-import { Component, input, Signal, booleanAttribute } from '@angular/core'; +import { Component, input, Signal, booleanAttribute, isSignal } from '@angular/core'; protected formatData(data: string | object | Signal<string | object> | undefined): string { if (data === undefined || data === null) return ''; - const unwrappedData = - typeof data === 'function' && 'call' in data ? (data as Signal<string | object>)() : data; + const unwrappedData = isSignal(data) ? data() : data; // ... }
123-130: Multiple signal reads; consider caching the value.As noted previously,
hasInputArguments()invokesthis.inputArguments()twice. Cache the value in a local variable.🔎 Proposed fix
protected hasInputArguments(): boolean { - return this.inputArguments() !== undefined && this.inputArguments() !== null; + const value = this.inputArguments(); + return value !== undefined && value !== null; }
132-142:getLoadingStatecontains dead code path.As noted in the past review, the comment on line 140 mentions showing loading for empty string output, but the method just returns
false. Either implement the behavior or remove the misleading comment.🔎 Suggested cleanup
protected getLoadingState(): boolean { - const loadingValue = this.loading(); - - // If explicitly loading - if (loadingValue) { - return true; - } - - // If output is empty string (not undefined), show loading - return false; + return this.loading(); }
144-147: Redundant type assertion ingetOutputValue.As noted previously, the cast matches the declared return type and serves no purpose. Simplify to
return this.output();.src/app/examples/si-chat-messages/si-ai-chat-container.ts (2)
273-276: Loose typing onmessagesSignalparameter; considerWritableSignal<ChatMessage[]>.As noted in the past review, using
anyloses type safety. Since this is example code demonstrating proper usage patterns, stronger typing would serve as better documentation.
280-297: NestedsetTimeoutcalls lack cleanup on component destroy.As noted previously, if the component is destroyed mid-simulation, these timeouts will still fire. Other examples in this codebase implement
ngOnDestroyfor lifecycle cleanup. Consider adding it here or adding a comment noting this simplification is intentional for the demo.projects/element-ng/chat-messages/si-chat-input.component.ts (1)
147-155: Breaking change:sendingandinterruptibleno longer coerce non-boolean values.As noted in the past review, changing from
input(false, { transform: booleanAttribute })tomodel(false)removes automatic coercion of string values like"true"to boolean. Parents must now pass actual boolean values. Since the component is marked@experimental, this is acceptable but worth noting in migration documentation.projects/element-ng/chat-messages/si-ai-chat-container.component.ts (2)
108-114: [Previously flagged]messageVersionsWeakMap is never updated, breaking cache invalidation.This issue was identified in a previous review and remains unresolved. The cache will always return stale data once populated since the version tracking is non-functional.
541-559: [Previously flagged] Off-by-one boundary check could benefit from clarifying comment.The suggested comment from the previous review has not been applied. The logic is correct, but a comment would improve maintainability.
projects/element-theme/src/styles/components/_markdown-hljs-theme.scss
Outdated
Show resolved
Hide resolved
|
@Killusions Love iiiiit! I have only two points:
When there is no space, the summary chips should stack: 
Can you check these things? Thank youuu |
The wrapping I'll fix but don't the specs only have the key visual if bigger than a certain screen size? |
@Killusions yes, the key visual should only be visible when there is space, in the responsive version is not visible. I was asking if there was a version with the key visual at all...even in big breakpoints (xl, xxl) i dont see it 🤔 Or am i missing something? I also see that the tooling is added with this sort of loader...didn't we agreed on wait for this? The design will change quite soon, as the AI team is working on some visualization for this: 
|
Don't worry it's just rebased on top, I won't merge it before this one. |
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
6ec8dde to
177e1e8
Compare
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Fix all issues with AI agents
In @.npmrc:
- Line 3: The .npmrc entry for the @linus scoped registry
("@linus:registry=https://code.siemens.com/api/v4/packages/npm/") points to a
URL that returns 404; update this entry to a valid, reachable registry URL (or
remove it if the scope should use the default registry), and if the registry
requires authentication add the proper auth config (e.g., auth token or
credentials) to .npmrc so npm can resolve @linus packages; verify the corrected
URL by running an npm install for a known @linus package to confirm resolution.
In @docs/patterns/ai/ai-chat.md:
- Line 89: Rewrite the sentence describing the si-ai-chat-container to remove
the comma splice and clarify the fixed-height requirement: state that the
si-ai-chat-container provides a complete AI chat interface with an integrated
welcome screen, requires a fixed height constraint, and if the parent layout
does not provide one the developer must set an explicit pixel height (give a
brief example such as style="height: 600px"); update the sentence in the docs to
this clearer wording and ensure no ambiguous phrasing remains.
In @projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts:
- Around line 186-228: Tests access internal computed signals via (component as
any).inputInterruptible() and inputSending(); make these approachable without
casting by exposing test helpers or public getters. Add public methods or
readonly properties on the component (e.g., getInputInterruptible(),
getInputSending() or public readonly
inputInterruptibleSignal/inputSendingSignal) that return the computed values or
signals, update tests to call those instead of casting, or alternatively
refactor tests to assert observable UI/behavior changes driven by those computed
signals rather than calling internals directly.
In @projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss:
- Around line 42-44: The summary chips are wrapping individually because the
rule on div:first-child uses flex-wrap: wrap; instead of switching the row to a
column at smaller viewports; update the styling for the selector div:first-child
(or its parent container/class used for the chip row) to change flex-direction
from row to column at the responsive breakpoint (via a media query or container
query) so the whole chip row stacks vertically, or alternatively add a
responsive utility class (e.g., flex-column on small screens) to that container
to force column layout rather than horizontal wrapping.
In @src/app/examples/si-chat-messages/si-ai-welcome-screen.ts:
- Around line 21-28: The initial value of the signal selectedCategory does not
match any promptCategories.label (selectedCategory is 'all' while
promptCategories contains 'All prompts'), causing the initial selection to fail;
fix by aligning them — either change the selectedCategory initial value to 'All
prompts' (matching the label) or update the promptCategories entry to use 'all'
(or both) and ensure casing/spacing is consistent with the component logic that
compares the signal to PromptCategory.label.
In @src/app/examples/si-chat-messages/si-chat-container.html:
- Around line 41-50: The category chips container (.prompt-suggestions >
div:first-child) uses flex-wrap and needs a responsive override: add a media
query or container query for small breakpoints (e.g., .si-container-xs,
.si-container-sm) to set flex-direction: column, adjust gap/align-items (e.g.,
align-items: stretch or flex-start) and remove horizontal wrapping so chips
stack vertically; update the stylesheet used by the si-ai-welcome-screen
template (or the parent container CSS) to include this rule so the chip layout
switches to column on small viewports.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (7)
package-lock.jsonis excluded by!**/package-lock.jsonplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (31)
.npmrcapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/translate/index.api.mddocs/patterns/ai/ai-chat.mdpackage.jsonplaywright/e2e/element-examples/static.spec.tsplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlprojects/dashboards-demo/src/styles.scssprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-theme/src/styles/variables/_semantic-tokens.scssprojects/element-theme/src/theme/_theme-element.scsssrc/app/examples/si-chat-messages/si-ai-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.htmlsrc/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-chat-container.htmlsrc/app/examples/si-chat-messages/si-chat-container.tssrc/styles.scss
🧰 Additional context used
🧠 Learnings (41)
📚 Learning: 2025-12-16T16:19:17.950Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1207
File: playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--data-entered.yaml:38-38
Timestamp: 2025-12-16T16:19:17.950Z
Learning: Do not review files in the playwright/snapshots directory, as they contain auto-generated test artifacts. Exclude any YAML snapshot files under playwright/snapshots from code reviews in the siemens/element repository. If a YAML file is not an auto-generated snapshot, verify its origin before skipping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
📚 Learning: 2025-12-22T13:04:35.578Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: src/app/examples/ag-grid/ag-grid-empty-state.ts:20-24
Timestamp: 2025-12-22T13:04:35.578Z
Learning: The SiEmptyStateComponent in siemens/element-ng accepts icon names in kebab-case format (e.g., 'element-technical-operator') that may not be directly exported as constants in the element-icons.ts file. Do not flag these as errors if they render correctly at runtime.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/translate/si-translatable-keys.interface.tsapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-22T13:29:36.922Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/parts/color-scheme.part.ts:35-35
Timestamp: 2025-12-22T13:29:36.922Z
Learning: In the Element design system (projects/element-ng/theme and projects/element-theme), only `--element-body-font-family` is exposed as a CSS custom property for typography. Font sizes are NOT exposed as CSS custom properties; they are defined using internal SCSS variables (e.g., `typography.$si-font-size-body`) that compile to fixed values. Using hardcoded pixel values for fontSize in AG Grid theme configuration (e.g., `fontSize: '14px'`) is the correct approach.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/dashboards-demo/src/styles.scss
📚 Learning: 2025-12-17T04:34:55.597Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: Guideline: In Angular projects using OnPush change detection (zoneless mode), you only need to call ChangeDetectorRef.markForCheck() for asynchronous operations (e.g., setTimeout, setInterval, Promises, Observables) where a change is not automatically detected. Event handlers triggered by Angular template bindings (click, input, etc.) will trigger change detection automatically and do not require explicit markForCheck() calls. Apply this broadly to TS files within Angular components/services that use OnPush; use markForCheck() selectively for async work where change detection wouldn’t run otherwise.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tssrc/app/examples/si-chat-messages/si-chat-container.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-30T13:52:33.581Z
Learnt from: dauriamarco
Repo: siemens/element PR: 1221
File: projects/element-ng/side-panel/si-side-panel.component.ts:136-142
Timestamp: 2025-12-30T13:52:33.581Z
Learning: Maintain the existing negative naming convention (e.g., disableBackdrop) across the siemens/element repository for consistency. Do not refactor to positive names (e.g., showBackdrop, hasBackdrop) unless the project explicitly changes the convention. In reviews, flag changes that alter established naming patterns in related files under projects/element-ng.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-09T14:32:34.036Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:34.036Z
Learning: In projects/element-ng/chat-messages, nested if blocks are preferred over switch statements for branching on message types in Angular templates.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scsssrc/app/examples/si-chat-messages/si-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-chat-container.component.scssapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-09T14:31:33.543Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50
Timestamp: 2025-12-09T14:31:33.543Z
Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scsssrc/app/examples/si-chat-messages/si-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-welcome-screen.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tssrc/app/examples/si-chat-messages/si-chat-container.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2026-01-02T16:41:57.274Z
Learnt from: kfenner
Repo: siemens/element PR: 1005
File: docs/fundamentals/styles/sizing.md:18-26
Timestamp: 2026-01-02T16:41:57.274Z
Learning: In Element documentation (siemens/element), sizing utility examples in docs may intentionally differ from implementation examples to demonstrate multiple valid approaches - for example, documentation might use traditional CSS properties like `height` and `width` while the implementation example uses logical properties like `block-size` and `inline-size`. These are considered different examples rather than inconsistencies.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
📚 Learning: 2025-12-17T14:01:05.705Z
Learnt from: dauriamarco
Repo: siemens/element PR: 908
File: projects/element-ng/side-panel/si-side-panel.component.ts:70-74
Timestamp: 2025-12-17T14:01:05.705Z
Learning: In the Element side-panel component (projects/element-ng/side-panel/si-side-panel.component.ts), the `xxxlMinimum` breakpoint (1920px) is intentionally hardcoded as a private static constant rather than being part of the configurable `Breakpoints` interface. This design preserves full Bootstrap compatibility (which only defines breakpoints up to xxl/1400px) while allowing Element to handle ultra-wide screens explicitly without affecting the standard breakpoint configuration.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-chat-container.component.scss
📚 Learning: 2025-12-31T07:16:13.451Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/parts/radio-style.part.ts:15-61
Timestamp: 2025-12-31T07:16:13.451Z
Learning: In the AG Grid theme package (projects/element-ng/ag-grid), styling should maintain consistency with the base Element design system components rather than adding enhancements or extra CSS. If accessibility improvements like focus-visible indicators are needed, they should be implemented at the Element design system level first.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-theme/src/theme/_theme-element.scss
📚 Learning: 2025-12-15T10:05:59.100Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.
Applied to files:
playwright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2026-01-07T12:19:38.754Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1240
File: projects/dashboards-ng/package.json:21-22
Timestamp: 2026-01-07T12:19:38.754Z
Learning: In the siemens/element repository, Angular peer dependencies are intentionally pinned to exact major versions (e.g., "angular/core": "21") rather than ranges in package.json files for published packages like siemens/dashboards-ng, siemens/element-ng, and siemens/element-translate-ng. This is a deliberate strategy to ensure strict version alignment.
Applied to files:
.npmrcprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tssrc/app/examples/si-chat-messages/si-chat-container.ts
📚 Learning: 2025-12-09T14:19:26.605Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:26.605Z
Learning: In library projects (e.g., element-ng), do not list implementation dependencies for optional features in the main dependencies. Move those into devDependencies (used for demos/examples) and have consuming apps install them separately if they enable the feature. This avoids bloating library consumers with unnecessary packages and clarifies that optional features are not guaranteed to work without extra installs. If a feature is truly optional, consider documenting it and, if appropriate, using optionalDependencies to reflect optional runtime usage.
Applied to files:
package.json
📚 Learning: 2025-12-11T10:09:01.564Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-15T07:17:06.981Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-15T07:16:53.762Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-08T11:24:45.272Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-01T04:01:27.365Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1099
File: projects/element-ng/accordion/si-accordion.component.spec.ts:39-43
Timestamp: 2025-12-01T04:01:27.365Z
Learning: With Angular 20 and esbuild, synchronous `TestBed.configureTestingModule(...).compileComponents()` calls work correctly even when components use external templates (templateUrl), because esbuild pre-compiles templates at build time. The async/await pattern is not required in this scenario.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-15T07:16:32.082Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-05T08:00:38.407Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/typeahead/si-typeahead.directive.spec.ts:114-121
Timestamp: 2025-12-05T08:00:38.407Z
Learning: In the typeahead test suite (projects/element-ng/typeahead/si-typeahead.directive.spec.ts), jasmine.clock() must be installed in beforeAll and uninstalled in afterAll (not beforeEach/afterEach) because using per-test clock installation causes schedulerFunction-related issues in these specific tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-01T14:12:11.111Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:17.637Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-12-08T11:25:20.861Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-08T11:25:51.584Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tssrc/app/examples/si-chat-messages/si-ai-chat-container.ts
📚 Learning: 2025-11-18T12:37:30.510Z
Learnt from: Killusions
Repo: siemens/element PR: 1040
File: projects/element-ng/chat-messages/si-chat-input.component.ts:338-349
Timestamp: 2025-11-18T12:37:30.510Z
Learning: In projects/element-ng/chat-messages/si-chat-input.component.ts, the interrupt behavior is intentionally different for button clicks vs Enter key: the button can emit interrupt even without content, but pressing Enter requires content or attachments (canSend() must be true) to emit interrupt.
Applied to files:
src/app/examples/si-chat-messages/si-chat-container.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlsrc/app/examples/si-chat-messages/si-ai-chat-container.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tssrc/app/examples/si-chat-messages/si-chat-container.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-ai-chat-container.component.ts
📚 Learning: 2025-12-11T14:44:11.278Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1185
File: projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.html:11-11
Timestamp: 2025-12-11T14:44:11.278Z
Learning: The si-icon component in siemens/element-ng/icon automatically applies aria-hidden="true" to its content. Do not suggest adding aria-hidden="true" to si-icon elements, as accessibility is already handled internally by the component.
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.ts
📚 Learning: 2026-01-02T06:41:22.404Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: playwright/e2e/element-examples/static.spec.ts:119-121
Timestamp: 2026-01-02T06:41:22.404Z
Learning: In the Element design system (siemens/element repository), disabling the `aria-required-children` accessibility rule for `SiEmptyStateComponent` is an accepted pattern. This component is used in AG Grid overlays (AgNoRowsOverlayComponent) and other places in Element, and the rule is consistently disabled in tests where this component appears (e.g., si-pills-input, datatable-row-group, ag-grid-empty-state).
Applied to files:
src/app/examples/si-chat-messages/si-ai-chat-container.html
📚 Learning: 2025-12-04T11:54:31.132Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1133
File: projects/element-ng/tour/si-tour.service.spec.ts:21-26
Timestamp: 2025-12-04T11:54:31.132Z
Learning: In the siemens/element repository, all components are standalone by default and do not require the explicit `standalone: true` flag. Components should be added to the `imports` array in TestBed configuration, not the `declarations` array.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.ts
📚 Learning: 2025-12-22T13:26:40.908Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1237
File: tools/api-goldens/test_api_report.ts:19-23
Timestamp: 2025-12-22T13:26:40.908Z
Learning: In the siemens/element repository, the team intentionally uses internal APIs from `microsoft/api-extractor` (such as `AstDeclaration`, `AstModule`, `ExportAnalyzer`, `ApiItemMetadata`, and `Collector` from `/lib/analyzer` and `/lib/collector` paths) in `tools/api-goldens/test_api_report.ts` to customize API extraction behavior (e.g., marking protected members as internal). This is an accepted practice because the required functionality is not available through the public API, and the version is pinned to mitigate risks.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.ts
📚 Learning: 2025-12-22T13:21:07.745Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/provider.ts:74-81
Timestamp: 2025-12-22T13:21:07.745Z
Learning: In the siemens/element repository, configuration providers use custom string tokens with useValue for consistency (e.g., provideSiDatatableConfig uses { provide: 'configuration', useValue: {...} }). The AG Grid provider follows this same pattern with { provide: 'ag-grid-options', useValue: provideGlobalGridOptions({...}) }.
Applied to files:
projects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.ts
📚 Learning: 2025-12-09T14:32:26.166Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:26.166Z
Learning: In Angular templates, prefer using nested *ngIf blocks over *ngSwitch for branching on message types within the chat-messages components. Use *ngIf with else branches to handle distinct cases and avoid complex switch logic in HTML templates. This guideline applies to all HTML templates under projects/element-ng/chat-messages.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.html
📚 Learning: 2025-12-01T09:34:50.028Z
Learnt from: Killusions
Repo: siemens/element PR: 1047
File: docs/fundamentals/ux-text-style-guide/basics.md:45-50
Timestamp: 2025-12-01T09:34:50.028Z
Learning: In docs/fundamentals/ux-text-style-guide/basics.md, the Don'ts section intentionally contains duplicate "Hey there!" entries to show that the same informal greeting is an inappropriate alternative for multiple formal welcome messages (both "Welcome to Building X" and "Welcome Werner von Siemens").
Applied to files:
src/app/examples/si-chat-messages/si-ai-welcome-screen.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.html
📚 Learning: 2025-12-09T14:33:54.441Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: src/app/examples/si-chat-messages/si-ai-message.ts:24-43
Timestamp: 2025-12-09T14:33:54.441Z
Learning: In src/app/examples/ (example/demo code) directories, allow and expect code duplication. Treat duplication as acceptable for demonstration code that aims to illustrate usage rather than enforce DRY. Do not enforce refactoring to remove duplication in example files; focus on readability and clarity of examples. This applies to all TypeScript files under src/app/examples (including nested subdirectories like si-chat-messages).
Applied to files:
src/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-chat-container.ts
📚 Learning: 2026-01-07T08:57:45.608Z
Learnt from: dauriamarco
Repo: siemens/element PR: 1226
File: src/app/examples/si-navbar-vertical/si-navbar-vertical.ts:112-115
Timestamp: 2026-01-07T08:57:45.608Z
Learning: Do not strictly enforce badge color consistency in example files under src/app/examples. Treat badge color checks as non-blocking for TypeScript files in this directory; reviewers may still note inconsistencies, but they should not require changes for these example files. Apply this guidance broadly to all files within src/app/examples.
Applied to files:
src/app/examples/si-chat-messages/si-ai-welcome-screen.tssrc/app/examples/si-chat-messages/si-ai-chat-container.tssrc/app/examples/si-chat-messages/si-chat-container.ts
📚 Learning: 2025-12-04T10:35:45.465Z
Learnt from: Killusions
Repo: siemens/element PR: 1147
File: docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md:81-84
Timestamp: 2025-12-04T10:35:45.465Z
Learning: In docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md, the Clear content section's Do's intentionally contains four identical "Delete Wittelsbacherplatz München?" entries to show that the same simple, direct question is the appropriate alternative for multiple different incorrect phrasings (overly wordy questions, generic terms, unnecessary disclaimers, and redundant words).
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yaml
📚 Learning: 2026-01-02T16:41:48.359Z
Learnt from: kfenner
Repo: siemens/element PR: 1005
File: docs/fundamentals/styles/sizing.md:18-26
Timestamp: 2026-01-02T16:41:48.359Z
Learning: In Element docs, sizing examples may differ between documentation and implementation to illustrate multiple valid approaches. Do not flag such differences as inconsistencies; treat them as separate illustrative examples (e.g., using height/width in docs vs block-size/inline-size in implementation). Apply this understanding across Markdown documentation files to avoid false-positive review flags.
Applied to files:
docs/patterns/ai/ai-chat.md
📚 Learning: 2025-12-23T09:24:35.163Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/translate/index.api.md:12-84
Timestamp: 2025-12-23T09:24:35.163Z
Learning: In the siemens/element repository, do not review files under the api-goldens/ directory (e.g., api-goldens/**/index.api.md) since they are auto-generated by API Extractor. Exclude these from review checks and focus on source files that are not auto-generated.
Applied to files:
api-goldens/element-ng/translate/index.api.mdapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-23T09:24:57.843Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/index.api.md:324-325
Timestamp: 2025-12-23T09:24:57.843Z
Learning: Do not review files in the api-goldens directory, as they are auto-generated API reports produced by API Extractor.
Applied to files:
api-goldens/element-ng/translate/index.api.mdapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-23T09:24:40.395Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/module-federation/index.api.md:7-11
Timestamp: 2025-12-23T09:24:40.395Z
Learning: In the siemens/element repository, do not review any files under the api-goldens directory, as they are auto-generated API reports produced by API Extractor. These MD files should be excluded from review unless explicitly overridden.
Applied to files:
api-goldens/element-ng/translate/index.api.mdapi-goldens/element-ng/chat-messages/index.api.md
📚 Learning: 2025-12-09T14:19:34.846Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:34.846Z
Learning: In library projects like element-ng, optional features that are provided through callback/function parameters (e.g., syntaxHighlighter in markdown renderer) should not have their implementation dependencies (e.g., highlight.js) listed in the library's dependencies. These should remain in devDependencies for demo/example purposes, and consuming applications should install them directly if they choose to use those features.
Applied to files:
src/app/examples/si-chat-messages/si-chat-container.ts
🧬 Code graph analysis (5)
playwright/e2e/element-examples/static.spec.ts (1)
playwright/support/test-helpers.ts (1)
test(286-296)
src/app/examples/si-chat-messages/si-ai-chat-container.ts (4)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
PromptSuggestion(15-17)projects/element-ng/chat-messages/si-chat-input.component.ts (1)
ChatInputAttachment(47-54)projects/element-ng/chat-messages/chat-message.model.ts (4)
ChatMessage(157-157)UserChatMessage(77-86)AiChatMessage(95-102)MessageAction(18-31)projects/element-ng/file-uploader/si-file-upload.directive.ts (1)
FileUploadError(18-21)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
Component(13-42)
src/app/examples/si-chat-messages/si-chat-container.ts (4)
projects/element-translate-ng/translate/si-translate.inject.ts (1)
injectSiTranslateService(11-20)projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
getMarkdownRenderer(69-402)projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (2)
PromptCategory(11-13)PromptSuggestion(15-17)
projects/element-ng/chat-messages/si-ai-chat-container.component.ts (4)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
PromptSuggestion(15-17)projects/element-ng/chat-messages/si-chat-input.component.ts (1)
ChatInputAttachment(47-54)projects/element-ng/chat-messages/chat-message.model.ts (4)
ChatMessage(157-157)MessageAction(18-31)AiChatMessage(95-102)TemplateChatMessage(135-143)projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
MarkdownRendererOptions(20-54)
🔇 Additional comments (33)
projects/element-ng/schematics/scss-import-to-siemens-migration/style-mappings.ts (1)
28-28: LGTM! Brand namespace migration is consistent.The font and theme import paths have been correctly updated from @simpl/brand to @linus/brand. This aligns with the broader namespace migration across the repository, and the corresponding test expectations in
index.spec.tshave been updated to match.Also applies to: 46-47
package.json (3)
56-56: LGTM! Script updated for brand namespace migration.The prepare-brand script has been correctly updated to use @linus/brand for favicon asset copying, consistent with the namespace migration.
184-184: LGTM! Brand dependency migration is consistent.The optionalDependencies entry has been correctly updated from @simpl/brand to @linus/brand@2.3.0, consistent with the namespace migration across the repository.
142-142: Dependencies are correctly placed and versions are secure.The new devDependencies (@types/katex@0.16.7, highlight.js@^11.11.1, katex@0.16.27) are appropriately located in devDependencies for optional markdown rendering features. All versions are free of known security vulnerabilities:
- katex@0.16.27: All prior CVEs (CVE-2024-28244, CVE-2024-28245, CVE-2024-28246, CVE-2025-23207) are patched in this version.
- highlight.js@^11.11.1: Latest stable release in the actively maintained 11.x series; older vulnerabilities affecting pre-10.4.x have been resolved.
- @types/katex@0.16.7: No vulnerabilities in the type definitions.
src/styles.scss (1)
17-17: LGTM! SCSS imports updated for brand namespace migration.The font and theme import paths have been correctly updated from @simpl/brand to @linus/brand, consistent with the repository-wide namespace migration.
Also applies to: 19-20
projects/element-ng/schematics/scss-import-to-siemens-migration/index.spec.ts (1)
97-98: LGTM! Test expectations updated for brand namespace migration.The test expectations have been correctly updated to reflect the new @linus/brand namespace in both test scenarios. This ensures the SCSS migration schematic produces the correct output with the updated brand imports.
Also applies to: 102-102, 113-113, 128-129
projects/dashboards-demo/src/styles.scss (1)
3-3: The @linus/brand package migration is properly configured.The
@linus/brandpackage is already declared in the rootpackage.jsonwith version2.3.0, and the.npmrcis correctly configured with the@linusregistry pointing to the Siemens NPM registry. The migration from@simpl/brandto@linus/brandis complete with no remaining unmigrated references. The internal paths in the imports (assets/fonts,dist/element-theme-siemens-brand-light,dist/element-theme-siemens-brand-dark) appear consistent with the package structure.projects/element-ng/translate/si-translatable-keys.interface.ts (1)
6-8: LGTM!The new translatable keys follow the existing pattern and align with the new AI chat components (SI_AI_CHAT_CONTAINER, SI_MARKDOWN_RENDERER, SI_TOOL_MESSAGE). All keys are optional strings, maintaining backward compatibility.
Also applies to: 171-172, 222-223
playwright/e2e/element-examples/static.spec.ts (2)
119-121: LGTM!The new test cases for si-ai-chat-container, si-tool-message, and si-ai-welcome-screen follow the existing test pattern and provide coverage for the new components.
112-112: No action required. Thecolor-contrastandlink-in-text-blockrule suppressions are appropriate for this component.SiMarkdownRendererComponentis a content renderer that transforms user-provided markdown input into HTML. Thelink-in-text-blocksuppression reflects the intended behavior of rendered markdown links, and thecolor-contrastsuppression acknowledges that arbitrary user content cannot guarantee WCAG AA contrast requirements. These suppressions are consistent with Element's established pattern for content and presentation components.Likely an incorrect or invalid review comment.
src/app/examples/si-chat-messages/si-chat-container.html (2)
2-2: LGTM!The template reference variable
#chatContainerenables programmatic access to the chat container, which is useful for controlling scroll behavior or other container-level operations.
68-68: LGTM!The placeholder text update to "Enter a command, question or topic…" is more descriptive and uses a proper ellipsis character.
docs/patterns/ai/ai-chat.md (2)
112-124: LGTM!The prompt suggestions documentation clearly explains the two approaches (simple array vs. categorized record) with concrete TypeScript examples. This effectively guides developers on how to structure their prompt data.
126-143: LGTM!The base chat container documentation provides a clear explanation of the slot architecture and available slots, helping developers understand how to build custom chat interfaces.
projects/element-theme/src/styles/variables/_semantic-tokens.scss (1)
189-190: The semantic token is correctly defined and properly used; verify responsive behavior claim.The token
$element-ai-key-visualis correctly defined in_semantic-tokens.scss:190with appropriate theme-specific values in_theme-element.scss(black SVG in light theme, white SVG in dark theme). The componentsi-ai-welcome-screen.component.scssproperly consumes the token viabackground-image: variables.$element-ai-key-visual;.However, the responsive behavior contradicts your observation: the key visual is hidden only at small breakpoints (xs, sm), not at large breakpoints (xl, xxl). The component explicitly hides the visual at container-xs and container-sm via the
:hostselector (lines 31-32). If the visual is not appearing at xl/xxl, the issue may be elsewhere (e.g., parent layout constraints, z-index, or visibility). Verify the actual rendering context at large breakpoints.Likely an incorrect or invalid review comment.
src/app/examples/si-chat-messages/si-ai-welcome-screen.html (1)
1-11: LGTM! Template bindings are correct.The component bindings and template structure are well-formed. The two-way binding for
selectedCategory, input bindings forcategoriesandpromptSuggestions, and event binding forpromptSelectedalign with the component's API.The projected content (greeting text) follows the expected pattern for content projection in the welcome screen component.
Note: The hardcoded English text in lines 8-9 has already been flagged in a previous review comment for i18n consideration.
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts (1)
1-90: LGTM! Test coverage is comprehensive.The test suite provides good coverage of the component's functionality:
- Component creation
- Category display and selection
- Prompt suggestion display and selection
- Edge cases (empty categories/suggestions)
The tests correctly use
fixture.componentRef.setInput()for setting inputs and spy on event emitters to verify outputs. The zoneless change detection setup is appropriate.Note: Two previous review comments have already identified optional refactoring opportunities:
- Removing the async/await pattern in the beforeEach (lines 14-18)
- Simplifying the type union in one of the tests
src/app/examples/si-chat-messages/si-ai-chat-container.html (2)
1-31: LGTM! Container and input setup is well-structured.The component composition is correct:
si-ai-chat-containerwith appropriate bindings for status, messages, loading states, and configurationssi-chat-inputproperly configured with placeholder, disclaimer, file handling, and event bindings- Event handlers for send, interrupt, and fileError are properly wired
The fixed-height layout wrapper and full-width classes ensure proper sizing.
Note: Hardcoded user-facing strings in lines 4, 16-17 have already been flagged for i18n consideration in a previous review comment.
33-47: Critical: Empty close button requires content.The modal template header contains a close button (lines 36-42) with no content between its tags. While the
element-cancelclass may apply styling, the button should contain an explicit icon element for proper rendering and visibility.This issue has been flagged in a previous review comment.
Likely an incorrect or invalid review comment.
projects/element-theme/src/theme/_theme-element.scss (1)
220-222: LGTM! Theme-aware key visual properly implemented.The
element-ai-key-visualtoken is correctly added to both light and dark theme maps with appropriate fills (black for light theme, white for dark theme). The inline SVG approach is standard for theme files and ensures the visual is always available without external dependencies.Also applies to: 371-373
projects/element-ng/chat-messages/index.ts (1)
5-17: LGTM! Public API exports correctly updated.The barrel file exports are properly updated to include the new AI chat components and consolidated model exports. The changes align with the PR objectives of adding the ai-welcome-screen component and related functionality.
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss (2)
50-52: Refactor away from the deprecated::ng-deepselector.The deprecated
::ng-deepselector should be replaced with a more maintainable approach such as using CSS custom properties, exposing an input for style customization, or applying a class directly to the button elements in the template.Likely an incorrect or invalid review comment.
15-27: Verify the key visual visibility with proper container context.The component correctly uses
SiResponsiveContainerDirectiveviahostDirectives, which automatically applies thesi-container-*classes. Thevariables.$element-ai-key-visualis properly defined as an SVG in the theme files. The::beforepseudo-element should only be hidden on xs and sm breakpoints and should display at larger sizes (md, lg, xl, xxl).However, the absolutely-positioned
::beforeextends 104px to the left (inset-inline-start: -104px). Verify that:
- The component's parent container doesn't have
overflow: hiddenor other overflow constraints that would clip the element- The component has sufficient space to the left at the target breakpoints (the viewport or parent needs to accommodate the 104px offset)
- The ResizeObserver is detecting container size changes correctly and applying the classes as expected
projects/element-ng/chat-messages/si-ai-welcome-screen.component.html (2)
25-25: Replace hardcodedtext-whitewith a theme-aware text color.The hardcoded
text-whiteclass creates poor contrast in light themes where the action card background uses a light experimental blue color. Replace withtext-primaryor remove the class to inherit the card's default text color for proper theme-aware rendering.Likely an incorrect or invalid review comment.
11-17: Consider tracking by a stable identifier.Using
track $indexcan cause unnecessary re-renders when the categories array is reordered. Consider tracking by a stable property such ascategory.label(assuming labels are unique) for better performance.⛔ Skipped due to learnings
Learnt from: Killusions Repo: siemens/element PR: 998 File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50 Timestamp: 2025-12-09T14:31:33.543Z Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
30-37:promptSuggestionssignal doesn't leverage category filtering.The component has
promptCategoriesdefined butpromptSuggestionsis a flat array. To demonstrate the category filtering feature ofSiAiWelcomeScreenComponent, consider using theRecord<string, PromptSuggestion[]>format.This is optional since the example may intentionally demonstrate the simple array format.
Likely an incorrect or invalid review comment.
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (1)
11-13: Consider adding anidfield toPromptCategoryfor better separation of concerns.The
PromptCategoryinterface only has alabelfield, which is used both for display and as the selection identifier. This creates confusion (as seen in example code whereselectedCategoryis initialized to'all'but categories use'All prompts'). Consider adding an optionalidfield to separate the identifier from the display label.⛔ Skipped due to learnings
Learnt from: mistrykaran91 Repo: siemens/element PR: 1234 File: src/app/examples/ag-grid/ag-grid-empty-state.ts:20-24 Timestamp: 2025-12-22T13:04:35.578Z Learning: The SiEmptyStateComponent in siemens/element-ng accepts icon names in kebab-case format (e.g., 'element-technical-operator') that may not be directly exported as constants in the element-icons.ts file. Do not flag these as errors if they render correctly at runtime.projects/element-ng/chat-messages/si-ai-chat-container.component.html (1)
10-13: Consider theme-aware text color for welcome messages.The hardcoded
text-whiteclass on the greeting and welcome message may create poor contrast in light themes. Consider using a theme-aware alternative or ensuring the parent container always provides sufficient contrast.⛔ Skipped due to learnings
Learnt from: Killusions Repo: siemens/element PR: 1047 File: docs/fundamentals/ux-text-style-guide/basics.md:45-50 Timestamp: 2025-12-01T09:34:50.028Z Learning: In docs/fundamentals/ux-text-style-guide/basics.md, the Don'ts section intentionally contains duplicate "Hey there!" entries to show that the same informal greeting is an inappropriate alternative for multiple formal welcome messages (both "Welcome to Building X" and "Welcome Werner von Siemens").Learnt from: dauriamarco Repo: siemens/element PR: 1226 File: src/app/examples/si-navbar-vertical/si-navbar-vertical.ts:112-115 Timestamp: 2026-01-07T08:57:45.608Z Learning: Badge color consistency in example files (src/app/examples/) is not a priority and should not be strictly enforced during reviews.src/app/examples/si-chat-messages/si-ai-chat-container.ts (1)
1-298: LGTM! Example component demonstrates proper usage patterns.The example component effectively demonstrates the AI chat container API with syntax highlighting, LaTeX rendering, message handling, and UI state management. The code is clear and instructive for users learning the component.
Note: Previous review comments have already addressed typing and lifecycle cleanup considerations for the simulation logic.
src/app/examples/si-chat-messages/si-chat-container.ts (2)
68-103: LGTM! Markdown renderer properly configured with optional features.The markdown renderer setup demonstrates good practices:
- Syntax highlighting with hljs includes proper error handling and fallback
- LaTeX rendering with KaTeX has error handling
- Translation service correctly bound for button labels
- Clear comments guide users on dependency requirements
287-289: Appropriate use of setTimeout for post-render scrolling.The
setTimeout(..., 0)pattern correctly defers the scroll operation until after Angular's change detection and DOM updates complete, ensuring the chat container has rendered the new message before scrolling.projects/element-ng/chat-messages/si-ai-chat-container.component.ts (2)
1-592: LGTM! Well-architected component with comprehensive API surface.This component demonstrates excellent Angular practices:
- Proper use of signals and computed for reactive state management
- Clean separation of concerns with helper methods
- Comprehensive JSDoc documentation for public API
- Appropriate use of WeakMap for message-based caching
- Correct effect usage for child component coordination
- Well-designed loading state injection logic
Note: A previous review comment has already addressed the cache invalidation mechanism for
messageVersions.
579-591: Clean prompt selection integration.The
onPromptSelectedhandler properly:
- Accesses the chat input component via signal
- Sets the input value from the suggestion
- Programmatically triggers the send event
- Clears the input after sending
This provides a seamless UX for selecting prompt suggestions from the welcome screen.
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
Outdated
Show resolved
Hide resolved
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
177e1e8 to
2d1237b
Compare
There was a problem hiding this comment.
Actionable comments posted: 18
🤖 Fix all issues with AI agents
In @docs/components/chat-messages/chat-message.md:
- Line 119: Change the "Tool Message Component" heading from level 2 to level 3
to match the rest of the document; locate the heading titled "Tool Message
Component" and replace the "##" prefix with "###" so it aligns with "Base chat
message", "Attachment list", "Markdown renderer", "User message", and "AI
message" section headings.
In @docs/patterns/ai/ai-chat.md:
- Line 89: Reword the confusing sentence about height for the
si-ai-chat-container: replace the circular phrasing with a clear statement such
as "The si-ai-chat-container requires a fixed height (either provided by its
parent layout or set directly in pixels)." Ensure the updated text references
the component name si-ai-chat-container and explains that height can come from
the parent or be set on the component itself.
In @package.json:
- Line 156: The package.json devDependency "highlight.js" uses a caret range
("^11.11.1") which is inconsistent with other exact-version devDependencies;
change the dependency entry for "highlight.js" to use the exact version
"11.11.1" (remove the leading caret) so it matches the format used by other
devDependencies like "katex" and "@types/katex".
In @projects/element-ng/chat-messages/chat-message.model.ts:
- Around line 135-143: TemplateChatMessage lacks the discriminant used by other
message types, making runtime/type-narrowing harder; update the
TemplateChatMessage interface to include a readonly type property (matching the
pattern used by BaseChatMessage and other message variants) with a literal value
like 'template' so checks such as message.type === 'template' will narrow the
union of ChatMessage[] to TemplateChatMessage.
In @projects/element-ng/chat-messages/si-ai-chat-container.component.ts:
- Around line 486-491: The null/undefined check in getOutputValue is verbose;
replace the condition `outputValue === undefined || outputValue === null` with
the concise loose-equality check `outputValue == null` so the method still
returns undefined for both null and undefined inputs, and keep the existing
isSignal branch and return behavior unchanged (refer to getOutputValue and
isSignal).
In @projects/element-ng/chat-messages/si-ai-welcome-screen.component.html:
- Around line 11-17: The ngFor loops currently use track $index which can cause
unnecessary DOM churn; update the ngFor directives that iterate categories() and
suggestions to use a stable unique key instead (e.g., track category.label for
the categories loop and track suggestion.id or suggestion.text for the
suggestions loop) so Angular can identify items across reorders/filters; locate
the loops rendering <si-summary-chip> (uses categories(), selectedCategory(),
onCategoryClick) and the suggestions loop and replace the track $index with the
appropriate unique property that is guaranteed stable and unique.
- Line 25: The markup uses the body projection attribute on si-action-card with
a hardcoded text-white class which fails contrast against the card’s background
(variables.$element-base-input-experimental / color-experimental-deep-blue-25)
in light theme; replace the static text-white with a theme-aware text color
(e.g., the project’s theme utility class) or apply conditional styling/class
toggling based on the active theme inside si-ai-welcome-screen.component (or in
si-action-card where <ng-content select="[body]"/> is projected) so the text
color meets contrast requirements in both light and dark themes.
In @projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss:
- Around line 50-52: Replace the ::ng-deep rule targeting button[si-action-card]
with a maintainable approach: remove ::ng-deep from the selector and instead (1)
expose a CSS custom property on the parent/host (e.g., --si-action-card-bg) and
set that in si-ai-welcome-screen.component.scss so the child action-card can
consume it, or (2) use a :host-context(...) selector on the welcome component to
style the child if the child honors host-context, or (3) add an @Input on the
child action-card component to accept a background value and set that input from
the welcome component template; update the action-card implementation to read
the custom property/input so the background-color applied to
button[si-action-card] no longer requires ::ng-deep.
- Around line 15-27: Add a temporary visual debug indicator and instrument the
responsive container to confirm which si-container-* class and measured width
are actually applied at xl/xxl: in the template for the welcome header (::before
key visual) add a non-invasive debug overlay (visible only in dev) that prints
the active si-container-* class, and in the SiResponsiveContainerDirective log
the measured clientWidth from the ResizeObserver callback and the class chosen;
ensure the ResizeObserver measurement runs after layout stabilizes (wrap initial
measurement in requestAnimationFrame or setTimeout 0 and re-run on window
resize) and calculate width using element.clientWidth minus any parent
horizontal padding (account for si-chat-container px-6 / px-md-9) so thresholds
for xl/xxl are evaluated correctly; if timing or padding is the cause, either
adjust the measurement timing or the breakpoint thresholds, and remove the debug
overlay after verification.
In @projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts:
- Around line 49-59: The test name is misleading — it says "should emit
categorySelected" but the assertion checks the `selectedCategory()` signal;
update the spec title to reflect the actual behavior (e.g., "should update
selectedCategory when category is clicked") and keep the existing test body that
sets inputs via `fixture.componentRef.setInput('categories', ...)`, clicks the
`si-summary-chip .chip`, and asserts `component.selectedCategory()`; do not
change the assertion to check an output/event since `selectedCategory` is a
model input/signal, not an emitted output.
In @projects/element-ng/chat-messages/si-chat-message.component.scss:
- Around line 52-55: There are two separate `.message-wrapper` rule blocks;
merge them into a single `.message-wrapper` selector that includes
`min-inline-size: 0`, `max-inline-size: 100%` and the additional properties
currently in the later block so the cascade is preserved; remove the duplicate
rule block and ensure the combined rule appears in the logical location in the
stylesheet to maintain specificity and intended layout.
In @projects/element-ng/chat-messages/si-tool-message.component.scss:
- Around line 15-17: The stylesheet uses deprecated ::ng-deep to style child
component internals (e.g., the rule targeting si-loading-spinner and other
blocks at lines 15-17, 77-93, 95-97); replace this by either (A) moving the deep
styles into the component TypeScript by setting ViewEncapsulation.None on the
SiToolMessageComponent and keeping the selectors without ::ng-deep, or (B)
better, update the child components (si-loading-spinner, si-collapsible-panel)
to expose CSS custom properties (e.g., --loading-spinner-size) and then set
those properties on :host or the component stylesheet without ::ng-deep; if
neither is feasible for now, leave a clear TODO comment and mark the ::ng-deep
usage as temporary.
In @projects/element-ng/chat-messages/si-tool-message.component.spec.ts:
- Line 119: Tests are accessing private/protected methods (formatData,
hasInputArguments, hasOutput, getLoadingState) by casting the component to any;
instead either (a) make these methods public on SiToolMessageComponent if they
are part of the component contract and should be tested directly, or (b) change
the tests to assert rendered output/behavior via the component's public API
(inputs, outputs, DOM queries) rather than calling internal methods; pick one
approach and update the spec cases that reference formatData, hasInputArguments,
hasOutput, and getLoadingState to use the chosen public surface so tests no
longer rely on casting to any.
In @projects/element-ng/chat-messages/si-tool-message.component.ts:
- Around line 132-142: The getLoadingState method contains an outdated comment
about empty-string output but returns false and is unnecessarily verbose;
simplify it to directly return the boolean value of this.loading() (e.g., use
Boolean(this.loading()) or !!this.loading()) and remove the incorrect comment
about empty-string handling; update references in the component to rely on the
simplified getLoadingState implementation.
- Around line 109-121: The runtime check in formatData incorrectly treats any
function as a Signal; replace the fragile typeof+call check with Angular's
isSignal utility to reliably detect Signal values: import and use isSignal(data)
when unwrapping the Signal in formatData (which accepts string | object |
Signal<string|object> | undefined) and then call the Signal only after isSignal
returns true; keep the remaining null/undefined, string and JSON.stringify
handling intact.
In @projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts:
- Around line 108-110: The code assumes tempDiv.firstElementChild is always
non-null; change the logic surrounding tempDiv, createHtml(), and the element
variable to guard against a null firstElementChild: after creating tempDiv and
setting innerHTML, check if tempDiv.firstElementChild exists before casting to
HTMLElement and caching/returning it, and if it's null handle explicitly (e.g.,
return null or wrap text nodes into a container) instead of casting null to
HTMLElement.
In @projects/element-ng/markdown-renderer/markdown-renderer.ts:
- Around line 820-835: The copy button handler that adds listeners to
'.copy-code-btn' should provide visual feedback: update the existing event
listener (the callback registered in
div.querySelectorAll('.copy-code-btn').forEach(...)) to call
navigator.clipboard.writeText(code).then(() => { change the clicked button’s
label/icon/state to indicate success (e.g., set innerText or add a 'copied' CSS
class) and restore the original state after a short timeout }) and in the
.catch() update the button to indicate failure (e.g., show an error state or
tooltip) and also restore after timeout; ensure you reference the clicked
element (const button = e.target as HTMLButtonElement) so the UI updates only
that button and avoid swallowing errors beyond logging.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (13)
package-lock.jsonis excluded by!**/package-lock.jsonplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-dark-linux.pngis excluded by!**/*.pngplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer-element-examples-chromium-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (47)
angular.jsonapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/markdown-renderer/index.api.mdapi-goldens/element-ng/translate/index.api.mddocs/components/chat-messages/chat-message.mddocs/patterns/ai/ai-chat.mdpackage.jsonplaywright/e2e/element-examples/static.spec.tsplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yamlprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/message-action.model.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-chat-message.component.scssprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-user-message.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/link/si-link.directive.tsprojects/element-ng/markdown-renderer/markdown-renderer-helpers.tsprojects/element-ng/markdown-renderer/markdown-renderer.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/translate/si-translatable-keys.interface.ts
💤 Files with no reviewable changes (2)
- projects/element-ng/link/si-link.directive.ts
- projects/element-ng/chat-messages/message-action.model.ts
🧰 Additional context used
🧠 Learnings (40)
📓 Common learnings
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50
Timestamp: 2025-12-09T14:31:33.543Z
Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:34.036Z
Learning: In projects/element-ng/chat-messages, nested if blocks are preferred over switch statements for branching on message types in Angular templates.
Learnt from: Killusions
Repo: siemens/element PR: 1040
File: projects/element-ng/chat-messages/si-chat-input.component.ts:338-349
Timestamp: 2025-11-18T12:37:30.510Z
Learning: In projects/element-ng/chat-messages/si-chat-input.component.ts, the interrupt behavior is intentionally different for button clicks vs Enter key: the button can emit interrupt even without content, but pressing Enter requires content or attachments (canSend() must be true) to emit interrupt.
📚 Learning: 2025-12-11T10:09:01.564Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.ts
📚 Learning: 2025-12-09T14:31:33.543Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:14-50
Timestamp: 2025-12-09T14:31:33.543Z
Learning: In projects/element-ng/chat-messages/si-ai-chat-container.component.html, message IDs can change, so tracking by message.id is not appropriate. The component uses `track message` (object identity) which is the correct approach for this use case.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/chat-messages/si-chat-message.component.scssplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yamlprojects/element-ng/chat-messages/index.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/chat-messages/si-user-message.component.spec.ts
📚 Learning: 2025-12-15T07:17:06.981Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-15T07:16:53.762Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.ts
📚 Learning: 2025-12-15T07:16:32.082Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-08T11:25:51.584Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-08T11:25:20.861Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:17.637Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-01T04:01:27.365Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1099
File: projects/element-ng/accordion/si-accordion.component.spec.ts:39-43
Timestamp: 2025-12-01T04:01:27.365Z
Learning: With Angular 20 and esbuild, synchronous `TestBed.configureTestingModule(...).compileComponents()` calls work correctly even when components use external templates (templateUrl), because esbuild pre-compiles templates at build time. The async/await pattern is not required in this scenario.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.ts
📚 Learning: 2025-12-08T11:24:45.272Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-15T10:05:59.100Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-user-message.component.spec.ts
📚 Learning: 2025-12-17T04:34:55.597Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: Guideline: In Angular projects using OnPush change detection (zoneless mode), you only need to call ChangeDetectorRef.markForCheck() for asynchronous operations (e.g., setTimeout, setInterval, Promises, Observables) where a change is not automatically detected. Event handlers triggered by Angular template bindings (click, input, etc.) will trigger change detection automatically and do not require explicit markForCheck() calls. Apply this broadly to TS files within Angular components/services that use OnPush; use markForCheck() selectively for async work where change detection wouldn’t run otherwise.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsplaywright/e2e/element-examples/static.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/markdown-renderer/markdown-renderer.tsprojects/element-ng/markdown-renderer/markdown-renderer-helpers.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-ng/chat-messages/si-user-message.component.spec.ts
📚 Learning: 2025-12-30T13:52:33.581Z
Learnt from: dauriamarco
Repo: siemens/element PR: 1221
File: projects/element-ng/side-panel/si-side-panel.component.ts:136-142
Timestamp: 2025-12-30T13:52:33.581Z
Learning: Maintain the existing negative naming convention (e.g., disableBackdrop) across the siemens/element repository for consistency. Do not refactor to positive names (e.g., showBackdrop, hasBackdrop) unless the project explicitly changes the convention. In reviews, flag changes that alter established naming patterns in related files under projects/element-ng.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.tsprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-attachment-list.component.spec.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/markdown-renderer/markdown-renderer.tsprojects/element-ng/markdown-renderer/markdown-renderer-helpers.tsprojects/element-ng/chat-messages/index.tsprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/chat-message.model.tsprojects/element-ng/translate/si-translatable-keys.interface.tsprojects/element-ng/chat-messages/si-user-message.component.spec.ts
📚 Learning: 2026-01-02T16:41:48.359Z
Learnt from: kfenner
Repo: siemens/element PR: 1005
File: docs/fundamentals/styles/sizing.md:18-26
Timestamp: 2026-01-02T16:41:48.359Z
Learning: In Element docs, sizing examples may differ between documentation and implementation to illustrate multiple valid approaches. Do not flag such differences as inconsistencies; treat them as separate illustrative examples (e.g., using height/width in docs vs block-size/inline-size in implementation). Apply this understanding across Markdown documentation files to avoid false-positive review flags.
Applied to files:
docs/components/chat-messages/chat-message.mddocs/patterns/ai/ai-chat.md
📚 Learning: 2025-12-05T08:00:38.407Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/typeahead/si-typeahead.directive.spec.ts:114-121
Timestamp: 2025-12-05T08:00:38.407Z
Learning: In the typeahead test suite (projects/element-ng/typeahead/si-typeahead.directive.spec.ts), jasmine.clock() must be installed in beforeAll and uninstalled in afterAll (not beforeEach/afterEach) because using per-test clock installation causes schedulerFunction-related issues in these specific tests.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.ts
📚 Learning: 2025-12-01T14:12:11.111Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.spec.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts
📚 Learning: 2025-12-09T14:32:34.036Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:34.036Z
Learning: In projects/element-ng/chat-messages, nested if blocks are preferred over switch statements for branching on message types in Angular templates.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/chat-messages/si-chat-message.component.scssprojects/element-ng/chat-messages/index.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/chat-message.model.ts
📚 Learning: 2025-12-22T13:04:35.578Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: src/app/examples/ag-grid/ag-grid-empty-state.ts:20-24
Timestamp: 2025-12-22T13:04:35.578Z
Learning: The SiEmptyStateComponent in siemens/element-ng accepts icon names in kebab-case format (e.g., 'element-technical-operator') that may not be directly exported as constants in the element-icons.ts file. Do not flag these as errors if they render correctly at runtime.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/markdown-renderer/si-markdown-renderer.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/translate/si-translatable-keys.interface.ts
📚 Learning: 2025-12-22T13:29:36.922Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/parts/color-scheme.part.ts:35-35
Timestamp: 2025-12-22T13:29:36.922Z
Learning: In the Element design system (projects/element-ng/theme and projects/element-theme), only `--element-body-font-family` is exposed as a CSS custom property for typography. Font sizes are NOT exposed as CSS custom properties; they are defined using internal SCSS variables (e.g., `typography.$si-font-size-body`) that compile to fixed values. Using hardcoded pixel values for fontSize in AG Grid theme configuration (e.g., `fontSize: '14px'`) is the correct approach.
Applied to files:
projects/element-ng/chat-messages/si-tool-message.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
📚 Learning: 2026-01-02T16:41:57.274Z
Learnt from: kfenner
Repo: siemens/element PR: 1005
File: docs/fundamentals/styles/sizing.md:18-26
Timestamp: 2026-01-02T16:41:57.274Z
Learning: In Element documentation (siemens/element), sizing utility examples in docs may intentionally differ from implementation examples to demonstrate multiple valid approaches - for example, documentation might use traditional CSS properties like `height` and `width` while the implementation example uses logical properties like `block-size` and `inline-size`. These are considered different examples rather than inconsistencies.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
📚 Learning: 2025-12-17T14:01:05.705Z
Learnt from: dauriamarco
Repo: siemens/element PR: 908
File: projects/element-ng/side-panel/si-side-panel.component.ts:70-74
Timestamp: 2025-12-17T14:01:05.705Z
Learning: In the Element side-panel component (projects/element-ng/side-panel/si-side-panel.component.ts), the `xxxlMinimum` breakpoint (1920px) is intentionally hardcoded as a private static constant rather than being part of the configurable `Breakpoints` interface. This design preserves full Bootstrap compatibility (which only defines breakpoints up to xxl/1400px) while allowing Element to handle ultra-wide screens explicitly without affecting the standard breakpoint configuration.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scss
📚 Learning: 2025-12-31T07:16:13.451Z
Learnt from: mistrykaran91
Repo: siemens/element PR: 1234
File: projects/element-ng/ag-grid/parts/radio-style.part.ts:15-61
Timestamp: 2025-12-31T07:16:13.451Z
Learning: In the AG Grid theme package (projects/element-ng/ag-grid), styling should maintain consistency with the base Element design system components rather than adding enhancements or extra CSS. If accessibility improvements like focus-visible indicators are needed, they should be implemented at the Element design system level first.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.html
📚 Learning: 2025-11-18T12:37:30.510Z
Learnt from: Killusions
Repo: siemens/element PR: 1040
File: projects/element-ng/chat-messages/si-chat-input.component.ts:338-349
Timestamp: 2025-11-18T12:37:30.510Z
Learning: In projects/element-ng/chat-messages/si-chat-input.component.ts, the interrupt behavior is intentionally different for button clicks vs Enter key: the button can emit interrupt even without content, but pressing Enter requires content or attachments (canSend() must be true) to emit interrupt.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-chat-container.component.tsprojects/element-ng/chat-messages/si-chat-message.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.spec.tsprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-attachment-list.component.tsprojects/element-ng/chat-messages/si-chat-container.component.scssprojects/element-ng/chat-messages/si-ai-welcome-screen.component.tsprojects/element-ng/chat-messages/si-tool-message.component.tsprojects/element-ng/chat-messages/si-chat-input.component.spec.tsprojects/element-ng/chat-messages/si-ai-message.component.tsprojects/element-ng/chat-messages/si-tool-message.component.htmlprojects/element-ng/chat-messages/si-user-message.component.tsprojects/element-ng/chat-messages/index.tsapi-goldens/element-ng/chat-messages/index.api.mdprojects/element-ng/chat-messages/si-chat-input.component.tsprojects/element-ng/chat-messages/si-ai-chat-container.component.tsprojects/element-ng/chat-messages/chat-message.model.ts
📚 Learning: 2025-12-09T14:32:26.166Z
Learnt from: Killusions
Repo: siemens/element PR: 998
File: projects/element-ng/chat-messages/si-ai-chat-container.component.html:21-47
Timestamp: 2025-12-09T14:32:26.166Z
Learning: In Angular templates, prefer using nested *ngIf blocks over *ngSwitch for branching on message types within the chat-messages components. Use *ngIf with else branches to handle distinct cases and avoid complex switch logic in HTML templates. This guideline applies to all HTML templates under projects/element-ng/chat-messages.
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.htmlprojects/element-ng/chat-messages/si-ai-welcome-screen.component.htmlprojects/element-ng/chat-messages/si-tool-message.component.html
📚 Learning: 2025-12-01T09:34:50.028Z
Learnt from: Killusions
Repo: siemens/element PR: 1047
File: docs/fundamentals/ux-text-style-guide/basics.md:45-50
Timestamp: 2025-12-01T09:34:50.028Z
Learning: In docs/fundamentals/ux-text-style-guide/basics.md, the Don'ts section intentionally contains duplicate "Hey there!" entries to show that the same informal greeting is an inappropriate alternative for multiple formal welcome messages (both "Welcome to Building X" and "Welcome Werner von Siemens").
Applied to files:
projects/element-ng/chat-messages/si-ai-chat-container.component.html
📚 Learning: 2025-12-11T14:44:11.278Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1185
File: projects/element-ng/navbar/si-navbar-item/si-navbar-item.component.html:11-11
Timestamp: 2025-12-11T14:44:11.278Z
Learning: The si-icon component in siemens/element-ng/icon automatically applies aria-hidden="true" to its content. Do not suggest adding aria-hidden="true" to si-icon elements, as accessibility is already handled internally by the component.
Applied to files:
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts
📚 Learning: 2025-12-04T11:54:31.132Z
Learnt from: chintankavathia
Repo: siemens/element PR: 1133
File: projects/element-ng/tour/si-tour.service.spec.ts:21-26
Timestamp: 2025-12-04T11:54:31.132Z
Learning: In the siemens/element repository, all components are standalone by default and do not require the explicit `standalone: true` flag. Components should be added to the `imports` array in TestBed configuration, not the `declarations` array.
Applied to files:
projects/element-ng/chat-messages/si-attachment-list.component.spec.ts
📚 Learning: 2025-12-16T16:19:17.950Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1207
File: playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--data-entered.yaml:38-38
Timestamp: 2025-12-16T16:19:17.950Z
Learning: Do not review files in the playwright/snapshots directory, as they contain auto-generated test artifacts. Exclude any YAML snapshot files under playwright/snapshots from code reviews in the siemens/element repository. If a YAML file is not an auto-generated snapshot, verify its origin before skipping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-tool-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-welcome-screen.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
📚 Learning: 2026-01-05T16:46:16.913Z
Learnt from: spliffone
Repo: siemens/element PR: 453
File: projects/element-translate-ng/ngx-translate/si-translate-ngxt.service.ts:42-44
Timestamp: 2026-01-05T16:46:16.913Z
Learning: In projects/element-translate-ng, the peer dependency range for ngx-translate/core includes both v16 and v17, requiring use of APIs compatible with both versions. The deprecated properties `currentLang`, `getDefaultLang()`, and `setDefaultLang()` must be used instead of their v17 replacements (`getCurrentLang()`, `getFallbackLang()`, `setFallbackLang()`) until v16 support is dropped in v49.
Applied to files:
projects/element-ng/markdown-renderer/si-markdown-renderer.component.tsapi-goldens/element-ng/markdown-renderer/index.api.md
📚 Learning: 2025-12-09T14:19:26.605Z
Learnt from: Killusions
Repo: siemens/element PR: 967
File: package.json:153-153
Timestamp: 2025-12-09T14:19:26.605Z
Learning: In library projects (e.g., element-ng), do not list implementation dependencies for optional features in the main dependencies. Move those into devDependencies (used for demos/examples) and have consuming apps install them separately if they enable the feature. This avoids bloating library consumers with unnecessary packages and clarifies that optional features are not guaranteed to work without extra installs. If a feature is truly optional, consider documenting it and, if appropriate, using optionalDependencies to reflect optional runtime usage.
Applied to files:
package.json
📚 Learning: 2026-01-07T19:44:24.336Z
Learnt from: spliffone
Repo: siemens/element PR: 453
File: projects/element-translate-ng/package.json:26-26
Timestamp: 2026-01-07T19:44:24.336Z
Learning: In this repository, peerDependencies in package.json should use hyphen-major-version ranges (e.g., '16 - 17', '22 - 25') instead of standard semver ranges like '>=16.0.0 <18.0.0' or '^16.0.0 || ^17.0.0'. This convention is applied across all packages for consistency. During reviews, verify that each package.json lists peerDependencies using a hyphen-range format, and update any that use conventional semver expressions. If needed, adjust to the correct major-version bounds (e.g., '16 - 17' for 16.x/17.x).
Applied to files:
package.json
📚 Learning: 2025-12-22T13:26:40.908Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1237
File: tools/api-goldens/test_api_report.ts:19-23
Timestamp: 2025-12-22T13:26:40.908Z
Learning: In the siemens/element repository, the team intentionally uses internal APIs from `microsoft/api-extractor` (such as `AstDeclaration`, `AstModule`, `ExportAnalyzer`, `ApiItemMetadata`, and `Collector` from `/lib/analyzer` and `/lib/collector` paths) in `tools/api-goldens/test_api_report.ts` to customize API extraction behavior (e.g., marking protected members as internal). This is an accepted practice because the required functionality is not available through the public API, and the version is pinned to mitigate risks.
Applied to files:
api-goldens/element-ng/markdown-renderer/index.api.md
📚 Learning: 2025-12-23T09:24:35.163Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/translate/index.api.md:12-84
Timestamp: 2025-12-23T09:24:35.163Z
Learning: In the siemens/element repository, do not review files under the api-goldens/ directory (e.g., api-goldens/**/index.api.md) since they are auto-generated by API Extractor. Exclude these from review checks and focus on source files that are not auto-generated.
Applied to files:
api-goldens/element-ng/markdown-renderer/index.api.mdapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/translate/index.api.md
📚 Learning: 2025-12-23T09:24:57.843Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/index.api.md:324-325
Timestamp: 2025-12-23T09:24:57.843Z
Learning: Do not review files in the api-goldens directory, as they are auto-generated API reports produced by API Extractor.
Applied to files:
api-goldens/element-ng/markdown-renderer/index.api.mdapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/translate/index.api.md
📚 Learning: 2025-12-23T09:24:40.395Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1235
File: api-goldens/dashboards-ng/module-federation/index.api.md:7-11
Timestamp: 2025-12-23T09:24:40.395Z
Learning: In the siemens/element repository, do not review any files under the api-goldens directory, as they are auto-generated API reports produced by API Extractor. These MD files should be excluded from review unless explicitly overridden.
Applied to files:
api-goldens/element-ng/markdown-renderer/index.api.mdapi-goldens/element-ng/chat-messages/index.api.mdapi-goldens/element-ng/translate/index.api.md
📚 Learning: 2025-12-04T10:35:45.465Z
Learnt from: Killusions
Repo: siemens/element PR: 1147
File: docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md:81-84
Timestamp: 2025-12-04T10:35:45.465Z
Learning: In docs/fundamentals/ux-text-style-guide/dialogs-and-buttons.md, the Clear content section's Do's intentionally contains four identical "Delete Wittelsbacherplatz München?" entries to show that the same simple, direct question is the appropriate alternative for multiple different incorrect phrasings (overly wordy questions, generic terms, unnecessary disclaimers, and redundant words).
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container.yamlplaywright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input.yaml
📚 Learning: 2025-12-17T08:58:19.300Z
Learnt from: akashsonune
Repo: siemens/element PR: 567
File: projects/charts-ng/src/components/si-chart/si-chart.component.ts:604-609
Timestamp: 2025-12-17T08:58:19.300Z
Learning: In projects/charts-ng/src/components/si-chart/si-chart.component.ts, when implementing theme changes with chart.setTheme() that reuses the ECharts instance without disposing it, do not call afterChartInit() again as it will duplicate event listener registrations, leading to memory leaks and multiple event firings.
Applied to files:
projects/element-ng/markdown-renderer/markdown-renderer.ts
📚 Learning: 2025-12-03T13:29:01.075Z
Learnt from: spike-rabbit
Repo: siemens/element PR: 1058
File: docs/components/pages/landing-page.md:34-36
Timestamp: 2025-12-03T13:29:01.075Z
Learning: In Markdown blockquotes with numbered sequences, escaping only the first number (e.g., `\1.`) is sufficient to prevent auto-numbering for the entire sequence. Subsequent numbers (2., 3., etc.) do not need individual escaping.
Applied to files:
playwright/snapshots/static.spec.ts-snapshots/si-markdown-renderer--si-markdown-renderer.yaml
🧬 Code graph analysis (7)
playwright/e2e/element-examples/static.spec.ts (1)
playwright/support/test-helpers.ts (1)
test(286-296)
projects/element-ng/markdown-renderer/si-markdown-renderer.component.spec.ts (1)
projects/element-ng/filtered-search/testing/si-filtered-search-criterion.harness.ts (1)
text(126-128)
projects/element-ng/chat-messages/si-ai-chat-container.component.spec.ts (1)
projects/element-ng/chat-messages/chat-message.model.ts (2)
ChatMessage(157-157)MessageAction(18-31)
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts (3)
src/app/examples/si-chat-messages/si-ai-welcome-screen.ts (1)
Component(13-42)src/app/examples/si-chat-messages/si-ai-chat-container.ts (1)
Component(22-299)src/app/examples/si-chat-messages/si-chat-container.ts (1)
Component(43-383)
projects/element-ng/chat-messages/si-tool-message.component.ts (2)
projects/element-ng/chat-messages/si-chat-container.component.ts (1)
Component(40-223)projects/element-translate-ng/translate/t.ts (1)
t(38-51)
projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts (3)
projects/element-translate-ng/translate/si-translate.inject.ts (1)
injectSiTranslateService(11-20)projects/element-translate-ng/translate/t.ts (1)
t(38-51)projects/element-ng/markdown-renderer/markdown-renderer.ts (2)
MarkdownRendererOptions(18-47)getMarkdownRenderer(66-889)
projects/element-ng/markdown-renderer/markdown-renderer.ts (1)
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts (3)
getCachedOrCreateElement(91-123)getCachedOrCreateString(129-159)sanitizeHtmlWithStyles(13-85)
🪛 ast-grep (0.40.4)
projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts
[warning] 106-106: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: containerEl.innerHTML = ''
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
projects/element-ng/markdown-renderer/markdown-renderer.ts
[warning] 536-536: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: tempTable.innerHTML = <tbody>${row}</tbody>
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 757-757: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: div.innerHTML = processedHtml
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 536-536: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: tempTable.innerHTML = <tbody>${row}</tbody>
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 757-757: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: div.innerHTML = processedHtml
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 488-488: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(escapedPipePlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
[warning] 734-734: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(paragraphPlaceholder, 'g')
Note: [CWE-1333] Inefficient Regular Expression Complexity [REFERENCES]
- https://owasp.org/www-community/attacks/Regular_expression_Denial_of_Service_-_ReDoS
- https://cwe.mitre.org/data/definitions/1333.html
(regexp-from-variable)
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
[warning] 108-108: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: tempDiv.innerHTML = createHtml()
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 108-108: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: tempDiv.innerHTML = createHtml()
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
⏰ 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
projects/element-ng/chat-messages/si-ai-chat-container.component.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/chat-messages/si-ai-chat-container.component.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/markdown-renderer/markdown-renderer-helpers.ts
Outdated
Show resolved
Hide resolved
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
from
2d1237b to
7edff83
Compare
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
3 times, most recently
from
d3a4843 to
17f2d29
Compare
spike-rabbit
left a comment
spike-rabbit
left a comment
There was a problem hiding this comment.
@panch1739 how much freedom should we give to app developer here?
With this approach they can only define the prompt categories (text only) and prompts (text only description). Is this sufficient or should we give them more freedom?
@Killusions please ignore the API remarks until @panch1739 replied.
Prompt category selection currently has no impact but according to Figma it should have.
projects/element-ng/chat-messages/si-ai-welcome-screen.component.ts
Outdated
Show resolved
Hide resolved
projects/element-ng/chat-messages/si-ai-welcome-screen.component.html
Outdated
Show resolved
Hide resolved
|
@spike-rabbit Just so we do not get confused here, when I was talking to Daniela I heard the exact opposite, these cards should not support rich content. |
@spike-rabbit Sorry, maybe it was confusing the Copilot example that i was referencing for you. At least for now, there is no plan to show more rich content. Maybe in the future? But for now, is just some plain text and that's it. So, today is just a list styled like a card collection. |
@spike-rabbit mmm im not sure I understand, but i think it refers to the cards vs. list comment. For now, is just planned to be a list styled as a card. Im not sure if in the future, they would need support more content types. So, im not sure what makes more sense: limit the use case as for today's definitions, or give more flexibility in case we need to extend. I dont have a concrete timeline or use case today beyond the text. |
Another consideration is changes from our side, if we restrict the API today, we remain in control of how these prompts are rendered and displayed. This means that if the design changes, we can adjust it and users get it with a simple update. If we make it more flexible, users can display whatever they want (also not properly following the design, but of course that can also be a benefit), but we won't be able to update the look later. |
|
@Killusions then keep it as is for now but please keep the rest ready:
|
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
3 times, most recently
from
d57a20a to
86d5fdb
Compare
|
@spike-rabbit Fixed the example and dropped all other commits except a scroll one (exposed method needed for the example, otherwise the welcome screen is shown incorrectly). |
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
2 times, most recently
from
1988170 to
57974b8
Compare
Killusions
requested review from
spike-rabbit
and removed request for
spike-rabbit
Killusions
force-pushed
the
feat/add-ai-welcome-screen
branch
2 times, most recently
from
71e732a to
9b3f0a1
Compare
spike-rabbit
force-pushed
the
feat/add-ai-welcome-screen
branch
from
9b3f0a1 to
b4df12f
Compare
|
|
feat(chat-messages): add ai-welcome-screen component
Rebased onto main
The OSS theme uses only the white/black icon as the key visual
Summary
This PR adds an AI welcome screen to chat-messages and broad AI chat support.
New components
Models & types
Markdown renderer
Other notable changes
Notes / open items