Improve design of Chat with Model

[Misjohns]

The current implementation and demo of the Chat with model should have an improved user experience.
@nerdalert @vishnoianil

Default screen (single model chat)

• User can select the model to chat with
• User can review the sources used for the model's response, navigating between them using the < and > arrows.
• User can view source by clicking on the source title link
• User can take action on the response (like, dislike, copy, download, and regenerate)
• User can manually enter their message or use audio to create a message
• User can Add custom model endpoint by clicking the button

Compare screen (chat with 2 models simultaneously)

• Use clicks the Compare button to load another chat panel to show 2 different model responses side by side
• User can close one of the chat panels to return to single model chat

[Misjohns]

Question: What are the appropriate actions a user can take to model response? Are these actions for the entire response (context and all sources),or should a user be able to take action on each individual source?

Possible actions:

• like (approve/accept)
• dislike (reject)
• copy
• download
• regenerate (chatbot will generate a new response)
• edit or modify (user could adjust response to help retrain model)
• take action on a source (remove, rank)

[Misjohns]

Improving the model selector

Providing visual affordance to aid user in selecting the appropriate model in Chat with a model view:

• Added badges to identify if the model is a base or a native model they are actively contributing to.
• Added timestamps of when a model was created/modified to aid the user in selecting the appropriate model

[beaumorley]

@Misjohns Can you replace this last part with the correct version using the "Fine-tune" label? Also, can you add some of the earlier screens we discussed like what the chatbot should look like when the user first invokes it? (like the "how can I help you?" text - https://www.patternfly.org/patternfly-ai/chatbot/overview/design-guidelines#content-considerations). Thanks.

[Misjohns]

Improving the model selector

Providing visual affordance to aid the user in selecting the appropriate model in Chat with a model view:

1. Added badges to identify if the model is a base or a model they are actively contributing to
2. Added timestamps of when a model was created/modified to aid the user in selecting the appropriate model

Open items:

• We need to decide on the right term for the top models (Fine-tuned, customized, etc.?)
• Model icons are FPO. Waiting on the final icons from RH brand team.

[Misjohns]

Chat with model welcome message (ie. empty state)

To introduce users to the chat experience, we will display a welcome message before they input their first message and encourage them to interact. This message is dismissed once a user sends their first message. This message would reappear when the user clears the chat. When the welcome message is displayed the message input field receives the default focus so user can immediately start typing their question.

[Misjohns]

@Misjohns Create a mockup version adding a recent category (top 5) + filter. Update description under fine-tuned category. Based on 5-feb-2025 UI community call.

[Misjohns]

If no default model is selected we need to create an empty state to instruct user to select model first.

[Misjohns]

Design updates:

• Added chat overflow menu
• Menu includes clear chat, view model details, and view chat history
• View chat history opens the conversation history drawer
• Replaced icons in input field to attachment and voice

Chat history drawer opened

https://www.patternfly.org/patternfly-ai/chatbot/ui#drawer-with-search-and-new-chat-button