Refactor InputBar with Tip Tap Library #2992

flvndvd · 2023-12-21T15:24:48Z

Description

This PR overhauls the fundamental workings of the input bar (distinct from the code definition, which includes the generation animation and additional logic). Specifically, this update replaces the complex, legacy code in the InputBar file, which previously managed a content-editable interface, with a new implementation powered by TipTap.

Enhancements introduced in this update include:

Improved handling of mentions, including fixes for typos and issues with copy/pasting.
Maintained styling of the Input bar which is now more restrictive with larger content.
Deactivation of the submit button when no content is present.
Significantly reduces the complexity of this part of the code.

🔈 Additional changes were made during the overhaul:

The input bar now clears text when switching conversations, aligning with the context-specific nature of conversation-assistant interactions. Although this design decision is up for debate, it could lead to future implementations preserving drafts across conversation browsing.

Pending issues to address include:

~~Implementing file type filtering during uploads to ensure only supported files can be selected (was already broken).~~
Adding scroll functionality to the @mention dropdown within the input bar, matching the usability provided by the right-hand call-to-action.
Placeholder should be removed on focus
Always display the mention dropdown around

🔮 Long-term enhancements on the horizon:

The interim solution of employing tippy.js (which by the way has poor TS types coverage -- hence the any) for positioning the dropdown when typing @ will need revisiting for potential dependency removal.

Undertaking such a refactoring carries the inherent risk of regressions. The input bar is a pivotal component, serving as the initial interface for users interacting with Dust. However, this modernization significantly reduces complexity, boosting our development velocity and simplifying maintenance. It also opens the door to effortlessly integrating text formatting features like bold, italics, and code blocks (which could be leverage to influence the models).

Tests

Design

The design does not change from the former implementation.

On mobile:

Action items before merging:

Move to an input_bar folder
Fix placeholder cursor (88acac5)
Typing the handle in full doesn't turn the text into a mention (eg typing @dust doesn't make a mention) (c61fe56)
Using TAB doesn't allow to turn the text into a mention (existing input bar does that) (f52269b)
Only accept supported file extensions (8038b9c)
Editor should get autofocus when page loads (b2f597c)
Attachment is not always considered (47aba84)

flvndvd · 2023-12-21T15:40:32Z

front/components/assistant/conversation/hooks/suggestion.ts

+
+const SUGGESTION_DISPLAY_LIMIT = 7;
+
+export function makeGetAssistantSuggestions(suggestions: EditorSuggestion[]) {


Typpy has limited coverage for TypeScript types, so I've used any as a temporary solution (see the PR description for details).

spolu

Code looks great! Incredible improvement.

From testing:

Blocking for merge IMHO:
- Placeholder should disapear on focus
Non blocking for merge (which you mention in the description)
- The suggestion moving below the cursor when there's only one element left

As you mention this component is quite critical. I would suggest getting a +1 from everyone before deploy based on testing on front-edge.

Assume you have my +1 as soon as the placeholder thing is resolved 👍

spolu · 2023-12-21T17:26:24Z

Oh and as per IRL let's move everything in an input_bar folder 🙏

flvndvd · 2023-12-21T17:34:10Z

front/components/assistant/conversation/InputBar.tsx

@@ -1,994 +0,0 @@
-import {


This file has been moved to input_bar. No changes.

fontanierh · 2023-12-22T08:36:06Z

Awesome work 🔥

As per slack, 2 small issues identified:

typing the handle in full doesn't turn the text into a mention (eg typing @dust doesn't make a mention)
using TAB doesn't allow to turn the text into a mention (existing input bar does that)

fontanierh · 2023-12-22T08:36:45Z

(but other than that you have my +1 as well)

lasryaric

Just caught a little setTimeout() not being cleaned-up while debugging the missing file bug.

lasryaric · 2023-12-22T09:47:36Z

front/components/assistant/conversation/input_bar/InputBar.tsx

+  useEffect(() => {
+    if (animate && !isAnimating) {
+      setIsAnimating(true);
+      setTimeout(() => setIsAnimating(false), 1500);


are we not missing a timeout clean up here in the return of useEffect()?

philipperolet · 2023-12-22T11:05:16Z

Keen to see it shipped ! 👍 for me too

flvndvd · 2023-12-22T11:57:14Z

Just caught a little setTimeout() not being cleaned-up while debugging the missing file bug.

@lasryaric done in 5e1f3bd :)

flvndvd · 2023-12-22T12:00:51Z

front/components/assistant/conversation/input_bar/InputBar.tsx

+// for operations that cannot rely on the normal asynchronous nature of setState.
+// This is not an ideal solution and should be addressed with a more robust state management strategy
+// as a follow-up action to minimize unnecessary re-renders and improve component performance.
+function useSyncedState<T>(initialValue: T | undefined) {


It's far from ideal, but this requires some more refactoring that falls out of scope of this already pretty big PR. The issue lies in dependencies that are not stable which leads to re-rendering.

Also from the react documentation:

The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call.

lasryaric

Truly amazing job! Thanks.

This reverts commit 2457d98.

This reverts commit 94e1d54.

* Revert "Revert "Refactor InputBar with Tip Tap Library (#2992)" (#3010)" This reverts commit 94e1d54. * Does not handle enter if mention dropdown is opened.

flvndvd added 16 commits December 18, 2023 09:19

tmp

f73e9d7

Merge branch 'main' into flav/tip-tap

c7dc00c

Tmp

8389b61

Tmp

318739c

Tmp

1ca9047

Fix each child should have a key warning

549265f

✂️

6b1fe1d

✨

9591d07

Clean up step 1

829062a

Final clean up

68e09a2

✂️

2bf290d

🎨

c0e0692

Rename

be3534b

✨

b09bef4

Move files around

d121f2d

✂️

aa5eccf

flvndvd self-assigned this Dec 21, 2023

flvndvd commented Dec 21, 2023

View reviewed changes

flvndvd marked this pull request as ready for review December 21, 2023 15:46

Merge branch 'main' into flav/tip-tap

4e6f6f0

spolu approved these changes Dec 21, 2023

View reviewed changes

flvndvd force-pushed the flav/tip-tap branch from ea46008 to 4e6f6f0 Compare December 21, 2023 17:32

flvndvd added 2 commits December 21, 2023 18:33

Move files to input_bar folder

34e44ff

Fix cursor on placeholder

88acac5

flvndvd commented Dec 21, 2023

View reviewed changes

📚

3508337

Only accept supported file extensions

8038b9c

Support tab to complete with selected assistant

f52269b

lasryaric suggested changes Dec 22, 2023

View reviewed changes

Select item on exact query match, prevent space default

c61fe56

flvndvd added 3 commits December 22, 2023 12:22

Auto focus the editor

f6f1349

Hack to patch up the attachment issue

2482350

Clean timeout on useEffect

5e1f3bd

flvndvd requested a review from lasryaric December 22, 2023 11:57

flvndvd commented Dec 22, 2023

View reviewed changes

flvndvd added 5 commits December 22, 2023 13:02

✨

4c7ac30

Focus editor after input file loaded

0ed8056

Revert hack

11622b1

Prevent default on enter.

47aba84

Handle Shift + Enter // Fix autofocus on end

b2f597c

lasryaric approved these changes Dec 22, 2023

View reviewed changes

flvndvd merged commit 2457d98 into main Dec 22, 2023
3 checks passed

flvndvd deleted the flav/tip-tap branch December 22, 2023 15:22

flvndvd added a commit that referenced this pull request Dec 22, 2023

Revert "Refactor InputBar with Tip Tap Library (#2992)"

7adc99d

This reverts commit 2457d98.

flvndvd mentioned this pull request Dec 22, 2023

Revert "Refactor InputBar with Tip Tap Library" #3010

Merged

flvndvd added a commit that referenced this pull request Dec 22, 2023

Revert "Refactor InputBar with Tip Tap Library (#2992)" (#3010)

94e1d54

This reverts commit 2457d98.

flvndvd restored the flav/tip-tap branch December 22, 2023 18:22

flvndvd added a commit that referenced this pull request Dec 22, 2023

Revert "Revert "Refactor InputBar with Tip Tap Library (#2992)" (#3010)"

a349615

This reverts commit 94e1d54.

flvndvd mentioned this pull request Dec 22, 2023

Refactor InputBar with Tip Tap Library (2nd try) #3012

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor InputBar with Tip Tap Library #2992

Refactor InputBar with Tip Tap Library #2992

flvndvd commented Dec 21, 2023 •

edited

Loading

flvndvd Dec 21, 2023

spolu left a comment

spolu commented Dec 21, 2023

flvndvd Dec 21, 2023

fontanierh commented Dec 22, 2023

fontanierh commented Dec 22, 2023

lasryaric left a comment

lasryaric Dec 22, 2023

philipperolet commented Dec 22, 2023

flvndvd commented Dec 22, 2023 •

edited

Loading

flvndvd Dec 22, 2023 •

edited

Loading

lasryaric left a comment


		const SUGGESTION_DISPLAY_LIMIT = 7;

		export function makeGetAssistantSuggestions(suggestions: EditorSuggestion[]) {

Refactor InputBar with Tip Tap Library #2992

Refactor InputBar with Tip Tap Library #2992

Conversation

flvndvd commented Dec 21, 2023 • edited Loading

Description

Tests

Design

Action items before merging:

flvndvd Dec 21, 2023

Choose a reason for hiding this comment

spolu left a comment

Choose a reason for hiding this comment

spolu commented Dec 21, 2023

flvndvd Dec 21, 2023

Choose a reason for hiding this comment

fontanierh commented Dec 22, 2023

fontanierh commented Dec 22, 2023

lasryaric left a comment

Choose a reason for hiding this comment

lasryaric Dec 22, 2023

Choose a reason for hiding this comment

philipperolet commented Dec 22, 2023

flvndvd commented Dec 22, 2023 • edited Loading

flvndvd Dec 22, 2023 • edited Loading

Choose a reason for hiding this comment

lasryaric left a comment

Choose a reason for hiding this comment

flvndvd commented Dec 21, 2023 •

edited

Loading

flvndvd commented Dec 22, 2023 •

edited

Loading

flvndvd Dec 22, 2023 •

edited

Loading