UX Paper Cuts 16.1 → AI Experiments UI Polish
Background
We have several AI features in Experiment
phase; how can UX Paper Cuts help get these features to Beta
(or if they're in Beta
, add any additional fixes for GA)?
Features & possible enhancements
Code suggestions
- Currently only in VSCode; needs to be available in other IDEs (might be beyond our scope)
Valerie: I'm removing Code Suggestions from our scope this milestone. Alex will be invested in getting this into other IDEs. We may be able to pick up polish items in later milestones.
GitLab chat
Help button on bottom left screen, drawer comes in from right- Drawer empty state: GitLab Chat: Adding empty state (!121703 - merged)
- Increase height of text field: GitLab Chat: Add ability to change height of input (!121238 - merged)
Send button has an icon- “What is a fork?” links to current page: Draft: GitLab Chat: Fix what is a fork url (!121244 - closed)
Maybe we could add avatar to your own messages, tanuki logo for GitLab responses- Make it more chat bubble-y: Make small updates to GitLab chat UI (!121193 - merged) & GitLab Chat: Improve chat message appearance (!121245 - merged)
- Update layout of response (links etc): GitLab Chat: Change alignment of sources (!121688 - merged)
- Look at other chatbot examples
- Consider better example questions, based on current page
- For example, if you're on an MR you might ask "Why is my pipeline failing?" If you're on an issue, maybe "How do I add this to an epic?"
- Use better loader indicator instead of spinner: GitLab Chat: Change loading animation of AI rep... (!121255 - merged)
Drawer appears full-height, instead of below breadcrumbs (check what it's supposed to do)
Explain code
Double border below warning alertDoes the warning alert need to be so long?🤔 (check with legal)- Highlight line of code in blob so you don't lose track of it: Code explanation: Highlight selected code lines (!121830 - merged)
- Potentially re-word
(?)
tooltip
Refactor code
Explain vulnerability
- Drawer is fixed below breadcrumbs (check if it's supposed to do this or be full-height)
- Use skeleton loader instead of spinner
- Headers have permalink actions on hover but don't actually work
- "This is generated by AI" is different than code explanation
- Is the blue alert on the vulnerability page the best way to highlight the feature?
Summarize comments & threads
- Tooltip gets stuck
Could theExperimental
badge be different? Maybe an icon?- Empty state when loading
- Button still clickable after summary finishes loading
- Maybe move up
Only visible to you
info
Create description
Summarize MR changes
Suggest test cases
- Uses skeleton loader
- Drawer height
-
Generate test with AI
doesn't haveExperiment
badge
Shared issues
- Drawer styling should be uniform
- Could we alert users to the
Look at this AI feature
a different, consistent way? Is there an icon or unique type of alert? -
Experiment
badge is inconsistent (small/default/blue/gray)
Assigning MRs for Review
MR Reviews for AI initiatives are being handled differently than other MRs. Please use the table below to identify the team DRIs per initiative so we get the right individuals to review. Dev MR reviews are based on the team. UX MR Reviews are done by the UX Paper Cuts team and an @ mention of the Design DRI for awareness.
AI Initiative | Team DRI | Design DRI |
---|---|---|
@katiemacoy |
||
GitLab Chat | AI Enablement | @katiemacoy |
Explain Code | Code Review | @katiemacoy |
Refactor Code | AI Enablement | @katiemacoy |
Explain Vulnerability | Threat Insights | @beckalippert |
Resolve Vulnerability | Threat Insights | @beckalippert |
Summarize Comments & Threads | Plan | @lvanc |
Create Description | Plan | @lvanc |
Summarize MR Changes | Code Review | @afracazo |
Suggest Test Cases | AI Enablement | @katiemacoy |
Feature flags
:openai_experimentation
:tanuki_bot
:explain_code_chat
:explain_code_snippet
:ai_experimentation_api
:ai_related_settings
:tofa_experimentation_main_flag
:anthropic_experimentation
:explain_code
:generate_test_file_flag
:search_issue_label_aggregation
:summarize_notes
:summarize_comments
:generate_description_ai
:explain_vulnerability