Update Chat UI by milaiwi · Pull Request #367 · reorproject/reor

milaiwi · 2024-08-21T17:40:11Z

closes #341
/claim #341

Lots of changes. I've tested as much as I can on my side, but let me know if you run into any issues. Some things to look out for:

Changing tabs/chats after submitting should stop streamingResponse
Clicking a prompt suggestion should go to new chat, display loadAnimation, then hide when response comes in
Checking overflow on TextArea
Changing size of windows

I believe I covered all of this, but since I made lots of changes I might have missed something.

Changes

Added loadAnimation to display when ChatInput submits. Clears when we get first response from streamingResponse
loadAnimation and loadResponse resets when changing tabs
Basic Animations
Changed TextArea to textarea on ChatInput since it's more dynamic when it comes to CSS
Fixed bug where changing chat while streamingResponse caused it to append on the newly selected currentChatHistory.displayableChatHistory

Things to look for

I did not merge with the previous PR on opening chat appearing on TabBar since I ran into bugs of it creating files in my FileSidebar that should not exist, hovering over the tab caused an issue with the Tooltip, and phantom tabs.

Future Addition

It would be nice if the API allowed for a function to call that cleans up streamingResponse when we no longer need the content. Right now, there is no way to stop it from streamingResponse so if we change tabs we have to wait for our content from finish appending. I can make a post on this if you want.

…ase on Chat.tsx

algora-pbc · 2024-08-21T17:40:20Z

💵 To receive payouts, sign up on Algora, link your Github account and connect with Stripe.

greptile-apps

PR Summary

This PR significantly updates the Chat UI, addressing the issues mentioned in #341 and introducing new features to enhance user experience.

Improved contrast and padding in chat messages (src/styles/chat.css)
Redesigned ChatInput component with dynamic height adjustment (src/components/Chat/ChatInput.tsx)
Added loading animations for better user feedback (src/utils/animations.tsx)
Implemented collapsible 'Recents' section in ChatsSidebar (src/components/Chat/ChatsSidebar.tsx)
Introduced new color variables and custom font in tailwind.config.js for consistent styling

_{10 file(s) reviewed, 17 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-08-21T17:41:33Z

src/components/Chat/Chat-Prompts.tsx

-            text-base
-            text-white shadow hover:bg-neutral-300 hover:text-black`}
+    className={`mx-1 mt-2
+            h-[100px] max-w-[200px] cursor-pointer rounded-lg border


style: Consider using Tailwind's aspect-square class instead of fixed height for better responsiveness

greptile-apps · 2024-08-21T17:42:15Z

src/components/Chat/Chat.tsx

    [setCurrentChatHistory], // Add any other dependencies here if needed
  )

+  /* eslint-disable */


style: This function is marked with eslint-disable. Consider addressing the linting issues instead of disabling eslint.

greptile-apps · 2024-08-21T17:42:16Z

src/components/Chat/Chat.tsx

+  /* eslint-disable */
+  useEffect(() => {
+    // Update context when the chat history changes
+    const context = getChatHistoryContext(currentChatHistory)
+    setCurrentContext(context)
+
+    if (!promptSelected) {
+      setLoadAnimation(false)
+      setLoadingResponse(false)
+    } else {
+      setPromptSelected(false)
+    }
+  }, [currentChatHistory?.id])
+  /* eslint-enable */


style: This useEffect hook is also marked with eslint-disable. Consider addressing the linting issues.

greptile-apps · 2024-08-21T17:42:17Z

src/components/Chat/Chat.tsx

+    if (promptSelected) {
+      handleSubmitNewMessage(undefined)
+    }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */


style: This eslint-disable-next-line comment suggests there might be a dependency array issue. Review the dependencies for this useEffect hook.

greptile-apps · 2024-08-21T17:42:18Z

src/components/Chat/Chat.tsx

+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [appendNewContentToMessageHistory, loadingResponse, currentChatHistory?.id])


style: Another eslint-disable-next-line comment. Consider addressing the dependency array issue for this useEffect hook.

greptile-apps · 2024-08-21T17:44:50Z

src/styles/chat.css

+}
+
+.chat-container p {
+    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica", "Apple Color Emoji", Arial, "Segoe UI Emoji", "Segoe UI Symbol";


style: long font-family declaration may benefit from being defined as a CSS variable for reusability

this is very similar to tailwind builtin font-sans

greptile-apps · 2024-08-21T17:44:51Z

src/styles/chat.css

+    background-color: rgb(50, 50, 50);
+    color: rgb(220, 220, 220);


style: consider using CSS variables for colors to maintain consistency and ease future updates

greptile-apps · 2024-08-21T17:44:52Z

src/styles/chat.css

+.assistant-chat-message {
+    color: rgb(210, 210, 210);


style: assistant message lacks background color, which may affect readability on different themes

greptile-apps · 2024-08-21T17:44:53Z

src/styles/chat.css

+@keyframes dropdown-fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(10px);
+    }
+}


style: animation transforms from 0 to 10px, which may be too subtle. Consider increasing the distance for a more noticeable effect

greptile-apps · 2024-08-21T17:46:22Z

src/utils/animations.tsx

+      <span className="animate-bounce">.</span>
+      <span className="animate-bounce delay-200">.</span>
+      <span className="animate-bounce delay-[400ms]">.</span>


style: Extract delay values to constants for easier maintenance

joseplayero · 2024-08-22T22:10:54Z

src/components/Chat/Chat.tsx

+                  <img src="/src/assets/reor-logo.svg" style={{ width: '64px', height: '64px' }} alt="ReorImage" />
+                </div>
+                <h1 className="mb-10 text-[28px] text-gray-300">
+                  Welcome to your AI-powered assistant! Start your first conversation or pick up where you left off.


I think the second sentence after exclamation should be:

Start a conversation with your second brain...

joseplayero · 2024-08-22T22:17:38Z

src/components/Chat/Chat.tsx

  const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
  const [askText] = useState<AskOptions>(AskOptions.Ask)
  const [loadingResponse, setLoadingResponse] = useState<boolean>(false)
+  const [loadAnimation, setLoadAnimation] = useState<boolean>(false)


it seems like we use loadingResponse and loadAnimation as basically the same thing - could you remove one of them please?

They're not the same thing. loadAnimation is the state that triggers the LoadingDots when we are waiting for a response from streamingResponse. If you use a remote API or have a slow machine, then the latency is very apparent and there needs to exist some way to know that everything is working properly and the LLM is going to send a response. loadAnimation gets set to false on the very first receive from streamingResponse

loadingResponse continues until we are completely done from getting a response from the LLM. That is to say that loadAnimation stops on the first data received, while loadingResponse stops at the very end. It's purpose is to prevent the user from submitting another message or input while we are still streaming.

ah gotcha. In that case to make the code easy to understand perhaps using a union type for all the states in loading response would be nice?

joseplayero

thanks for getting this together -Some queries:

Noting here the feature that was recently added for copying chat output to clipboard and creating file from chat output has been lost
Could you merge main into this so that we can properly test the changes
The prompt suggestions should be more semantic-retrieval prompts like "What have I written about philosophy", "which politicians have i discussed positively" rather than the ones you've added which would not retrieve anything useful from the users notes

joseplayero · 2024-08-23T22:44:25Z

tailwind.config.js

      },
      fontFamily: {
-        // "material-icons": ["Material Icons"],
+        'styrene': [


do we use this font?

it seems like we define a very similar set of prompts above in the chat-container p css

joseplayero

looks great @milaiwi

Tiny point: I think we need a "Send" or "Ask" button in new chat - but this can come alongside the work to improve the context settings for chat

I've also added a comment on the css/tailwind

joseplayero · 2024-08-23T23:05:26Z

/tip $30 @milaiwi

algora-pbc · 2024-08-23T23:05:31Z

👉 @joseplayero: Navigate to your dashboard to proceed

algora-pbc · 2024-08-23T23:12:30Z

@milaiwi: You just got a $30 tip! 👉 Complete your Algora onboarding to collect your payment.

algora-pbc · 2024-08-24T00:19:59Z

🎉🎈 @milaiwi has been awarded $30! 🎈🎊

milaiwi · 2024-08-24T00:23:26Z

I'll fix this up and make the last commit

milaiwi added 29 commits August 11, 2024 13:19

Cleaned up chat ui

b4c1bae

Updating chat UI

f656ea3

Update chat

e4795e2

Merge branch 'tab-support' into update-chat-ui

82eb0c5

Added sidebar change

b922e99

Changed textarea

df6be8f

Cleaned up chat UI

1cb803b

Small fix: DayPicker no longer causes parent div to shift in width

4ba0d9d

Small fix: DayPicker no longer causes parent div to shift in width

632444b

Small fix: Made customize context work on different screen sizes.

9a6a5ce

Small fix: Made customize context work on different screen sizes.

1763327

Merge branch 'customize-context-menu' into update-chat-ui

eba51e2

Bug on having both sidebars open on Chat

adf199d

Can open both sidebars now

31892d2

Bug with width on container

c16be8d

Cleaned up chat with large text content.

64d0dd5

Removed ScrollToBottom until fixed

715daa3

Draft: Cleaned up Chat UI

b6bf33b

Cleaned up codebase

e107931

Small width changes

253eb1b

Fixed streaming response issue. All that is left is to clean up codeb…

aca20da

…ase on Chat.tsx

Cleaned up the codebase

db66fa9

Cleaned up codebase

0c98ea8

Cleaned up codebase

e5c4698

Changed chat UI

1b35041

Cleaned up codebase. Changed Chat UI

686c782

Cleaned up codebase. Changed Chat UI

2e259f3

Cleaned up Chat UI

46008da

Clean up codebase

6668a89

algora-pbc bot mentioned this pull request Aug 21, 2024

Redesign Chat UI #341

Closed

algora-pbc bot added the 🙋 Bounty claim label Aug 21, 2024

greptile-apps bot reviewed Aug 21, 2024

View reviewed changes

joseplayero reviewed Aug 22, 2024

View reviewed changes

milaiwi added 2 commits August 23, 2024 09:32

Merged with main

83d48b3

Merged with main. Changed chat UI with copying and new note

5845bf5

joseplayero reviewed Aug 23, 2024

View reviewed changes

joseplayero approved these changes Aug 23, 2024

View reviewed changes

algora-pbc bot added the 💰 Rewarded label Aug 24, 2024

Deleted repetitive font and added box shadowing

f78ece4

joseplayero merged commit 51aecbc into reorproject:main Aug 24, 2024

		/* eslint-disable-next-line react-hooks/exhaustive-deps */
		}, [appendNewContentToMessageHistory, loadingResponse, currentChatHistory?.id])

		background-color: rgb(50, 50, 50);
		color: rgb(220, 220, 220);

Conversation

milaiwi commented Aug 21, 2024

Changes

Things to look for

Future Addition

Uh oh!

algora-pbc bot commented Aug 21, 2024

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

joseplayero Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2024

Choose a reason for hiding this comment

Uh oh!

joseplayero Aug 22, 2024

Choose a reason for hiding this comment

Uh oh!

joseplayero Aug 22, 2024

Choose a reason for hiding this comment

Uh oh!

milaiwi Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

joseplayero Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

joseplayero left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joseplayero Aug 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joseplayero Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

joseplayero left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joseplayero commented Aug 23, 2024

Uh oh!

algora-pbc bot commented Aug 23, 2024

Uh oh!

algora-pbc bot commented Aug 23, 2024

Uh oh!

algora-pbc bot commented Aug 24, 2024

Uh oh!

joseplayero left a comment •

edited

Loading

joseplayero Aug 23, 2024 •

edited

Loading

joseplayero left a comment •

edited

Loading