Improve Prompt Suggestions Placement and UI Enhancements for Chatbot

[taichan03]

Feature Descriptions:
Prompt Suggestions Inside Chatbot Screen:

Display prompt suggestions inside the chatbot conversation area instead of below the input box.
Ensure that suggestions appear in a visually distinct, but unobtrusive way, so users can easily click on them without affecting the flow of conversation.
The suggestions should disappear or update dynamically based on user interactions (e.g., when a suggestion is clicked or new suggestions are loaded).
Scroll Containment for Suggestions:

If there are multiple prompt suggestions, allow them to scroll within the chatbot area without extending beyond the chat window.
Ensure the scrollbar, if needed, appears only within the suggestion box area and does not interfere with other elements.
Responsive and Dynamic Sizing:

Adapt the prompt suggestion area to different screen sizes, ensuring that it remains legible and accessible on both desktop and mobile devices.
For smaller screens, reduce the font size or padding of prompt suggestions to maintain a compact design without sacrificing readability.
Visual Styling:

Style the prompt suggestions with distinct background colors and borders to differentiate them from regular messages.
Apply hover effects on desktop and touch animations on mobile devices to enhance interactivity and visual appeal.
Accessibility Considerations:

Ensure that suggestions are accessible via keyboard navigation.
Include ARIA labels for each suggestion to provide context for screen readers.