Fixes for chat eval layout and auto-scroll

[jeff-phillips-18]

Fixes Job logs displayed above the chat bot input box in case of "Single Input Box" is selected.
Fixes Chat eval chat bot doesn't scroll down automatically
Fixes Chat Eval UI not showing the status

Description

Additionally fixes some other layout/css issues in the Chat eval.
Uses the message area to inform the user if the model is not running or if it is loading.

Screen shots

[Misjohns]

@jeff-phillips-18 @vishnoianil sorry I have a few questions here.

• What does the green status icons represent? That the model is running?
• What are the other status we could show here?
• Why do we need to display a "good" icon. Adding a green check draws a users eye unnecessarily.
• Could we display loading then only switch to an error icon if there's an issue with the model?
• Can we not place the status icon inside the model dropdown menu? Look odd floating without any associated words.Here a PF component showing status toggle with helper text.
• Is a icon enough to alert the user if a model isn't available? Maybe we should use something like an empty state that provides additional room for explanation and even how the user can resolve.

[jeff-phillips-18]

@jeff-phillips-18 @vishnoianil sorry I have a few questions here.

• What does the green status icons represent? That the model is running?

Yes

• What are the other status we could show here?

Error state for stopped or not running, spinner for loading/unloading

• Why do we need to display a "good" icon. Adding a green check draws a users eye unnecessarily.

We currently show the state of the model server, if you think we only need error status or pending status we can do that

• Could we display loading then only switch to an error icon if there's an issue with the model?

Yes

• Can we not place the status icon inside the model dropdown menu? Look odd floating without any associated words.Here a PF component showing status toggle with helper text.

we could do that

• Is a icon enough to alert the user if a model isn't available? Maybe we should use something like an empty state that provides additional room for explanation and even how the user can resolve.

The model server could be temporarily down. The user would no longer see their history if we showed an empty state instead.

[jeff-phillips-18]

@Misjohns Please take another look. Updated the screen shots above.

[Misjohns]

I need help understanding how the Free GPUs counter and the No GPUs Free status text relate. Questions below.

• The GPU counter shows 0/1 which I take to mean I have 1 GPU available but it is not currently being utilized.
• If I have a model selected on the left side, I assume that model would use that 1 available GPU. Is that accurate?
• If I add a model to the right side then I'd expect to see the No GPUs Free since I only had 1 available which is being utilized by the model on the left. Is that correct?
• The screen cap below shows both chat panels showing No GPUs Free but the counter shows 0/1. Why?

I think it is better to display the No GPUs Free to the right of the model selector and treat as a plain alert with an icon. I also think this should just be a warning.

Regarding the single input box. I believe that should be the default since the goal is to compare the responses between 2 models. I recommend we change the toggle to "Display two input boxes". Not sure if input boxes is the correct term, looks like most UIs refer to it as a message input. @kaedward thoughts on wording for that toggle?

[jeff-phillips-18]

@Misjohns

I need help understanding how the Free GPUs counter and the No GPUs Free status text relate. Questions below.

• The GPU counter shows 0/1 which I take to mean I have 1 GPU available but it is not currently being utilized.

0/1 means zero free GPUs of the 1 GPU on the server.

• If I have a model selected on the left side, I assume that model would use that 1 available GPU. Is that accurate?
• If I add a model to the right side then I'd expect to see the No GPUs Free since I only had 1 available which is being utilized by the model on the left. Is that correct?
• The screen cap below shows both chat panels showing No GPUs Free but the counter shows 0/1. Why?

We can assume that if we select a model and it is ready then that model is using 1 of the GPUs. Prior to that we don't know which model is using the GPU.

I think it is better to display the No GPUs Free to the right of the model selector and treat as a plain alert with an icon. I also think this should just be a warning.

👍

[jeff-phillips-18]

@Misjohns Updated the No GPUs free:

[kaedward]

@Misjohns

For the switch, I recommend using sentence case (recommended across the UI) - so “Single input box”. Although I think it could be simpler to say “Share commands” and have it switched “on” by default. WDYT?

Same for the “No GPUs free” alert - although I’d suggest changing it to “No GPUs available”. “Free” is a term we try to avoid when possible because of its $$ connotations. I’d also change the “Free GPUs” label to “Available GPUs”.

I also have some unprompted feedback on the page title/description... 😁

Compare models
View two models side-by-side to compare their responses to commands. To send commands to one or both model at a time, toggle the Share commands switch.

[Misjohns]

@kaedward I personally would not know that "Share commands" meant "Show 2 input fields". Also, the default view should have a single input field so the toggle would be not to share commands, when toggled on 2 input fields display so user could ask chat with each model individually.

[jeff-phillips-18]

[Misjohns]

@jeff-phillips-18 Based on our UXD call the toggle should read "Use separate prompts" and the placehold text in input field should change to "Enter prompt…"