Update the UI

[jared-yu-hcltech]

To do:

• Create an icon to the top-left of the chatbot's chat box that shows the model company (e.g., Open AI, Google), along with some text indicating the model
• Make it so the recent chats is separated into Today, Past week, and older, where it needs to be unrolled for older chats
• Add a copy button so that it is visible at the top-right hand corner of the code (syntax highlight) regardless of whether the entire code is in view
• Add a light/dark mode
• After creating a new chat, show a logo (e.g., OpenAI, Llama, Gemini, etc.) of the current model and also include its name
• Add a dropdown menu to select the Gen AI backend (e.g., RAG etc.)
• After creating a new chat, show the Gen AI backend (e.g., RAG, fine tuning, etc.) of the current chat
• Switch to Tailwind?
• Re-open User chat bubble renders markdown poorly #22, and make the user chat bubbles into Markdown without causing the infinite width problem (Completed with Problem with SyntaxHighlighter for long text extending infinitely to the right #29)
• Change the scroll so that if the user scrolls then it stops the auto scrolling for the remainder of the message (Completed with Edit auto scrolling behavior so it can be stopped #18)
• Add a button at the bottom to jump to the end of the messages (Completed with Add button to allow users to jump to bottom of chat #26)
• Add a dropdown menu to select the LLM model (Completed with Allow users to swap between available AI models #12)
• Align the text for the DashboardPage.jsx so that it's centered with the chat box (fixed by removing the "Custom" from text: a072fae)
• Make the copy button highlight upon being clicked for the code syntax (added with: 456737e)
• Give the streaming text from the chatbot syntax highlighting also for code (completed with 741163a)
• Edit the chat box so that after submitting a prompt the cursor stays in the chat box, this broke after going from input to textarea (fixed with 36046a8)
• Make the chat bubbles behave more as expected after making the chat wider (fixed with 8153c08)
• Make the content area wider (added with bba2d9d, but still needs work)
• Add an initial dropdown menu (added with 1bb9fbe), functionality in addition to copy will be worked on later
• Add disclaimer (completed in Add disclaimer #16)
• Edit the overflow-y: scroll in the ChatPage to not shift the entire screen to the left after becoming visible like in the original ChatGPT UI (fixed with: bc7fb3d)
• Edit the chat boxes so they look the same from the DashboardPage to the ChatPage (fixed with: 4bade4a)

[jared-yu-hcltech]

It could be good to test out replacing the LAMA AI gifs/images/styles with something more similar to HCL. That way we can track the assets and which CSS styles to edit to change the look of the app.

[jared-yu-hcltech]

Can use this tutorial for this purpose: https://www.youtube.com/watch?v=qwM23_kF4v4&t=190s

[jared-yu-hcltech]

Moved to top post

[jared-yu-hcltech]

Tried a trick from https://www.youtube.com/shorts/mg49F9qUs38, but it doesn't fix the scrollbar shifting issue completely.

  overflow: auto;
  scrollbar-gutter: stable;

This helps to move content to the left by default, but for some reason the chat box is also squished from the right in the DashboardPage.

Edit: Was able to combine this with position: sticky and width: 100% to get it to work in a17b2f9.

Edit 2: Not complete fixed yet.

Edit 3: Used the following to fix the width issue combined with position: fixed

width: calc(100% - 0.65 * (100vw - 50px));

seen in bc7fb3d

[jared-yu-hcltech]

Reference for syntax highlighting: https://medium.com/@lobocroidy/creating-a-code-block-with-syntax-highlighting-and-copy-button-using-react-and-typescript-c69be2061d73