- Notifications
You must be signed in to change notification settings - Fork1.1k
fix: improve AI Bridge request logs UI/UX#21252
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Conversation
| width="18" | ||
| height="18" | ||
| viewBox="0 0 18 18" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
As with<AnthropicIcon /> these are set at18px, being that they're SVGs they can scale and be happy but we currently have multiple competing standards for how we're handling icons. We should probably globalise on one standard.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
@chrifro FYI
Uh oh!
There was an error while loading.Please reload this page.
| <> | ||
| <TableRow | ||
| className="select-none cursor-pointer hover:bg-surface-secondary" | ||
| className="select-none cursor-pointer" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Need to have a discussion here if we still want to have ahover: effect. It directly clashes with the<Badge /> backgrounds. I can't say I love that.. YOMV.
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
matifali left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I am not sure if showingInitiator is a good idea in UI. We do not use this word anywhere in Coder UI, and it may confuse users on what is this new term,
@chrifro and@dannykopping for your thoughts?
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsxShow resolvedHide resolved
Uh oh!
There was an error while loading.Please reload this page.
| constcustomisedDateLocale:Intl.DateTimeFormatOptions={ | ||
| // Hide the year from the date | ||
| year:undefined, | ||
| // Show the month as a short name | ||
| month:"short", | ||
| day:"numeric", | ||
| hour:"2-digit", | ||
| minute:"2-digit", | ||
| second:"2-digit", | ||
| hour12:true, | ||
| }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
We need to decide if we're going to standardise against this, feels strange to have it just in the<RequestLogsPageView />. YOMV but I don't love the fact that we're no longer just relying on the browser to decide the output. Especially enforcing 12 hour time.
| <dt>{toolUsage.tool}</dt> | ||
| <dd> | ||
| <divclassName="flex flex-col gap-2"> | ||
| <div>{toolUsage.input}</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
@chrifro Unfortunately, we cannot make the assumption this is going to be in JSON format so we cannot apply formatting to it.
Uh oh!
There was an error while loading.Please reload this page.
Closes#21052 and is related to#21218
This pull request implements a bunch of changes the team requested to improve the overall user experience when navigating to the Request Logs page. Since these are mostly UI changes, screenshots do a much better job of showing what's different than me trying to explain everything in words, so I've included them below.
Warning
More globally we've changed how we're rendering
<PaginationHeader />, therefore we've renamed it to<PaginationAmount />. This will effect multiple layouts however its a global improvement we're intentionally looking to make.Preview
Changes
MMM(i.eDec).namefield falling back on.username.text-xstotext-smto increase overall legibility globally.<Badge />and gives longer names a chance to render.<Badge />alongside their icons.<Badge />-group alongside truncation (when necessary).5is rendered with the proper name being visible on hover (for use if truncated).Showing X of Xcounts to the bottom of the tables (effects other components outside of AI Bridge).Providerfilter.<dt>element with the badge