47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
|
# Changes Made
|
||
|
|
|
||
|
|
## Auto-scrolling Fix
|
||
|
|
|
||
|
|
The issue was that the conversation container wasn't automatically scrolling to the bottom when new messages were added. This was fixed by:
|
||
|
|
|
||
|
|
1. Removing the direct DOM manipulation approach in the store subscription:
|
||
|
|
```typescript
|
||
|
|
// Old code
|
||
|
|
if (prevMessagesLength !== newMessagesLength) {
|
||
|
|
const container = document.querySelector('.main-conversation-container');
|
||
|
|
if (container) {
|
||
|
|
container.scrollTop = container.scrollHeight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// New code
|
||
|
|
if (prevMessagesLength !== newMessagesLength) {
|
||
|
|
this.shouldScrollToBottom = true;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
2. Using the existing ViewChild and ngAfterViewChecked approach consistently throughout the component.
|
||
|
|
|
||
|
|
This ensures that when new messages are added to the conversation, the view will automatically scroll to the bottom to show the latest message.
|
||
|
|
|
||
|
|
## Storybook @font-face Issue
|
||
|
|
|
||
|
|
The issue was that Storybook couldn't understand the @font-face declarations in the _typo.scss file because they were using tilde (~) notation for paths. This was fixed by:
|
||
|
|
|
||
|
|
1. Changing all font paths from tilde notation to relative paths:
|
||
|
|
```scss
|
||
|
|
// Old path
|
||
|
|
src: url('~src/app/styles/typo/Barlow/Barlow-Thin.ttf') format('truetype');
|
||
|
|
|
||
|
|
// New path
|
||
|
|
src: url('../styles/typo/Barlow/Barlow-Thin.ttf') format('truetype');
|
||
|
|
```
|
||
|
|
|
||
|
|
This change allows Storybook to properly process the @font-face declarations and load the fonts correctly.
|
||
|
|
|
||
|
|
## Summary
|
||
|
|
|
||
|
|
These changes ensure that:
|
||
|
|
1. The conversation container automatically scrolls to the latest message when new messages are added.
|
||
|
|
2. Storybook can properly load and display fonts defined with @font-face declarations.
|