(refactor|test)(frontend): chat

[amanape]

Summary

Test and rebuild the chat UI and create a new chat slice to accompany it.

Motivation

The <ChatInterface> component looks to be one of the oldest components that has been built since the initial versions of the UI and business logic. The components and children use and reuse some Redux state values, confusing CSS, and is generally difficult to read through.

Additionally, the chat slice has methods and properties that are not being used at all, such as the separation of assistantMessages and userMessages (which anyways could be obtained from messages). It also mixes simple chat logic with UI-dependent logic (typing effect).

Todo

• [x] Rebuild and test core components
• [x] Recreate chat slice
• [x] Simplify CSS
• [x] Auto-scroll on new messages
• [ ] Rebuild the useTypingEffect hook
• [x] Remove old components and state

Thoughts

It may also be worth considering to remove the typing effect altogether. In existing applications built around LLMs, they "stream" the results generating by the LLM. This allows a relatively fast and responsive-feeling compared to outputting the entire generated response, which takes longer.

The way OpenDevin is currently setup, we are giving the illusion of streaming, where we first obtain the fully generated response, then forcefully type it out via the useTypingEffect hook.

!!This actually ends up taking the longest compared to steaming OR outputting full generated response!!

Take this opportunity to switch to this PR's branch, and see for yourself how fast OpenDevin feels without the constraint on typing.

I can't say the extent of work required to allow for streaming from the backend, also given that not all models support it. But I suppose it is worth the discussion.

(We can also drop it entirely for the time being unless we really want to look like we are streaming)

~~By default, I will complete this draft with the current behavior of the chat and typing effect so it would be better tested, simplified, and readable. If there are other suggestions, I'd be glad to pursue them.~~

Related issues

#1399 - Markdown is not applied to messages being typed, this is because the chat interface has two different components for rendering messages, one for already existing, and one for messages still being typed. The <Markdown> component was only applied to the former (easy to miss). This PR will attempt to resolve this by only serving one component, typing or not, to render messages.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

:exclamation: No coverage uploaded for pull request base (main@8961cea). Click here to learn what that means.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1488   +/-   ##
=======================================
  Coverage        ?   60.74%           
=======================================
  Files           ?       87           
  Lines           ?     3709           
  Branches        ?        0           
=======================================
  Hits            ?     2253           
  Misses          ?     1456           
  Partials        ?        0           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[amanape]

Until there is any other better suggestion, I'll go ahead and test/implement typing effect as previous (albeit slower 😔)

[Sparkier]

Until there is any other better suggestion, I'll go ahead and test/implement typing effect as previous (albeit slower 😔)

Also other people might have different opinions, please chime in! (@rbren @yimothysu @openartist)

[amanape]

New changes feature both, typing effect + banner (until relevant party members share opinion). Whatever decision, we'll go for it.

useTyping

Improvements

• Fully TESTED
• Less prone to breaking (properly uses state management)
• Less complicated to read
• Renders markdown as it types (#1399)

Minor changes

• When user resumes session, all messages are retyped (for simplicity, FEEDBACK required)

[yimothysu]

Also other people might have different opinions, please chime in! (@rbren @yimothysu @openartist)

I personally prefer to omit the typing effect because it gives the impression that we're streaming when we're not. IMO a loading animation (such as the one used by Gemini) is sufficient, but either way this looks great!