32teeth/feature/scrollable placeholder

[32teeth]

Problem

The text input field in the chat prompt component doesn't allow scrolling when no text is present, causing usability issues. The placeholder text width doesn't adjust dynamically, leading to improper alignment and a poor user experience.

Solution

• Enabled dynamic scrolling behavior in the text input field when no text is present by adding the overflow-x: scroll property and ensuring scrollbars are hidden when there's no content.
• Added a new function getPlaceholderWidth to dynamically calculate and set the placeholder width based on the text content.
• Updated styling in _chat-prompt-wrapper.scss to ensure proper handling of the placeholder text width and scrollbar behavior.
• New SCSS/CSS variable --mynah-placeholder-width
  • Default set to 100%
  • When getPlaceholderWidth as a subscriber is called, returns and sets value for --mynah-placeholder-width using style: this.getPlaceholderWidth()

Bonus

Tip

import open from'open'; spacing issue and module / mjs was complaining

• Updated dev.js to handle file opening errors using a dynamic import.

Tip

Although we have watchers, added serve:example for refreshing developer environment without refreshing browser (wasn't working previously as intended as CMD+F5 had to be invoked

• Added new scripts in package.json to improve development workflow, including watch:web and serve:example commands.

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.