# 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.
