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?
• [x] Re-open #22, and make the user chat bubbles into Markdown without causing the infinite width problem (Completed with #29)
• [x] Change the scroll so that if the user scrolls then it stops the auto scrolling for the remainder of the message (Completed with #18)
• [x] Add a button at the bottom to jump to the end of the messages (Completed with #26)
• [x] Add a dropdown menu to select the LLM model (Completed with #12)
• [x] Align the text for the DashboardPage.jsx so that it's centered with the chat box (fixed by removing the "Custom" from text: a072fae)
• [x] Make the copy button highlight upon being clicked for the code syntax (added with: 456737e)
• [x] Give the streaming text from the chatbot syntax highlighting also for code (completed with 741163a)
• [x] 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)
• [x] Make the chat bubbles behave more as expected after making the chat wider (fixed with 8153c08)
• [x] Make the content area wider (added with bba2d9d, but still needs work)
• [x] Add an initial dropdown menu (added with 1bb9fbe), functionality in addition to copy will be worked on later
• [x] Add disclaimer (completed in #16)
• [x] 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)
• [x] 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