feat(ui) Chat Page UI enhancements 1 of 2

[gregclark-defenseunicorns]

User Story

As a LFAI
I want UI enhancements
So that I have a better experience using LFAI

Acceptance Criteria

Chat Page

• Persist error notifications until closed manually Design: Chat
• Move + icon on New Chat button to right of button and text to left and icon to right Design: Chat
• Reduce left padding in left panel for both the menu and submenu items. Ideally all the Button text (New Chat, Import..., Export...) and menu item text all align down the panel and then the submenu item text is indented 1rem (16px) from that. Design: Chat
• Remove top padding between the menu item text and associated submenu text. Leave the bottom padding Design: Chat
• Only show 3 dot menu on chat thread list on hover Design: Chat - 3 Dot Menu
• Can we move the 3 dot menu into the button instead of to the right? Design: Chat - 3 Dot Menu
• Change 3 dot menu style to look like a dropdown list Design: Chat - 3 Dot Menu
• Change Import/Export chat history buttons to "Alternate" style Design: Chat
• Move Assistant drop down to left of Prompt message input field Design: Chat
• Change style of assistant drop down to match prompt input (Does the input have an outline by default?) Design: Chat
• Change Assistant dropdown menu to match Figma design Design: Chat - Assistants Dropdown
• Change the "None" selection to "No Assistant" Design: Chat - Assistants Dropdown
• Change send icon in prompt input to be an up arrow Design: Chat
• Change color of file and send icon in prompt input to match place holder text (gray-400) Design: Chat
• Create hover color of file and send icon in prompt input and set to gray-300
• Change Code Block header background to gray-600 Design: Chat - Code Blocks
• Change Code Block body background to gray-800 Design: Chat - Code Blocks
• Change Code Block border to gray-600 Design: Chat - Code Blocks
• Change Delete Chat modal to match Figma design (Should be a Pop-Up modal in Flowbite) Design: Chat - Toasts/Modals
• Change Importing chat history toast to say just "Importing Chat History..." with spinner. See Figma design) Design: Chat - Toasts/Modals
• Add "Chat History imported successfully." toast when successful import Design: Chat - Toasts/Modals
• Add "Chat History import failed." toast when import fails Design: Chat - Toasts/Modals
• Add "Chat History exported successfully." toast when successful export Design: Chat - Toasts/Modals
• Add "Chat History export failed." toast when export fails Design: Chat - Toasts/Modals
• Add success toast when Chat thread is deleted successfully Design: Chat - Toasts/Modals
• Update spacing in top and bottom sections in left panel to be 16px on top and bottom and 12px on the left and right Design: Chat

Attachments

Design Links:

• Chat
• Chat - 3 Dot Menu
• Chat - Assistants Dropdown
• Chat - Code Blocks
• Chat - Toasts/Modals

Linked Story

• 2 of 2

[andrewrisse]

See #1168 for changes that completed about half of the items