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]

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]

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 model details and chat history may be future items.
• Remove "send message" icon from the message bar until user as entered text in the message field.
• By default the message bar should display attachment and voice
• • Attachment may be a future item.

[Misjohns]

@kaedward Please review and provide final microcopy for Chat with model.

• Want to capture all final microcopy for 1.4 improvements in this doc?

[Misjohns]

@kaedward Here's the current microcopy from the designs.

Page header and description

Chat with a model

Before you start adding new skills and knowledge to your model, you can check its baseline performance by chatting with a language model 
that's hosted on your cloud. Choose a supported model from the model selector or configure your own custom endpoints to gain direct access to a specific model you've trained.

Learn more about managing custom model endpoints

Button: Add custom model endpoint

Chat window region
Model selector dropdown: Select a model
Button: Compare
Overflow menu: Clear chat | View model details | View chat history
Chat message input: Send a message…
Footnote: Verify all information from this tool. LLMs make mistakes.

Chat Bot Empty state
Hello, Username
Go ahead and ask me a question.

[kaedward]

@Misjohns I added a new section in the content doc I used for the other 1.4 issues - I have a few open questions in there for you :-)

[Misjohns]

Interaction for when a user has not selected a model

A user can input a message without selecting a model, but they can not send the message until a model(s) has been selected.

Message bar interaction
The PF team has opened PF bug #457, so we can support this disabled tooltip.

[jeff-phillips-18]

The PF team has opened PF bug #457, so we can support this disabled tooltip.

@Misjohns Tooltips are not shown for disabled buttons.