Repository navigation
feat(ai-chatbot): Replace suggestion chip emojis with modern outline SVG vector icons - #4274
DebasmitaBose0 wants to merge 1 commit into
Conversation
|
@DebasmitaBose0 is attempting to deploy a commit to the Dhairya Gothi 's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR updates the chatbot UI “suggestion chips” to use inline SVG icons and adds supporting CSS for the new icon+chip styling.
Changes:
- Added CSS rules for
.suggestion-chiphover animation and.chip-icon-svgsizing/styling - Replaced emoji-prefixed suggestion button labels with inline SVG icons
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); | ||
| } | ||
| .suggestion-chip:hover { | ||
| transform: translateY(-2px) scale(1.02); | ||
| } |
| .suggestion-chip { | ||
| display: inline-flex !important; | ||
| align-items: center; | ||
| gap: 6px; | ||
| transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); | ||
| } | ||
| .suggestion-chip:hover { |
| <button class="suggestion-chip" data-text="Explain quantum computing in simple terms"><svg class="chip-icon-svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg> Explain quantum computing</button> | ||
| <button class="suggestion-chip" data-text="Write a Python function to sort a list of dictionaries by a key"><svg class="chip-icon-svg" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg> Python sorting function</button> | ||
| <button class="suggestion-chip" data-text="What are the best practices for writing clean code?"><svg class="chip-icon-svg" viewBox="0 0 24 24"><path d="M12 2l2.4 4.8 4.8 2.4-4.8 2.4-2.4 4.8-2.4-4.8-4.8-2.4 4.8-2.4L12 2zm0 13l1.2 2.4 2.4 1.2-2.4 1.2-2.4 1.2-1.2 2.4-1.2-2.4-2.4-1.2 2.4-1.2L12 15z"/></svg> Clean code best practices</button> | ||
| <button class="suggestion-chip" data-text="Help me brainstorm names for a tech startup"><svg class="chip-icon-svg" viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg> Brainstorm startup names</button> |
dhairyagothi
added
gssoc:approved
|
Please resolve merge conflicts before this PR can be merged. |
2 similar comments
|
Please resolve merge conflicts before this PR can be merged. |
|
Please resolve merge conflicts before this PR can be merged. |
Closed #4273
Description
Replaces standard chip emojis (
⚛️,🐍,✨,💡) in empty state suggestions inside the Gemini AI ChatBot interface with clean, outline vector graphics.Enhancements
translateY(-2px)) on hover to encourage clicks.