Chat input redesigned #2478
Chat input redesigned #2478
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2478 +/- ##
==========================================
+ Coverage 28.01% 28.24% +0.22%
==========================================
Files 660 680 +20
Lines 44775 45715 +940
==========================================
+ Hits 12542 12910 +368
- Misses 32233 32805 +572
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| final map = {...standardBlockComponentBuilderMap}; | ||
| map[ParagraphBlockKeys.type] = ParagraphBlockComponentBuilder( | ||
| // only show placeholder at first line | ||
| showPlaceholder: (editorState, node) { |
There was a problem hiding this comment.
This is actual placeholder showing logic, but modifying it to make it disappear upon entering newline (without any content on first line) seems to be not allowed and throws exception.
| final mention = attributes.entries | ||
| .firstWhere((e) => e.value is MentionAttributes) | ||
| .value as MentionAttributes?; | ||
| MentionAttributes? mention; |
There was a problem hiding this comment.
This fix solves the gray area / bad state: exception problem because of nullable object here and now we have wrapped with proper error handling and return fallback in case, it fails.
| return Expanded( | ||
| child: IntrinsicHeight( |
There was a problem hiding this comment.
This IntrinsicHeight wrapper isn't needed as opposed to inner one, so having it removed is recommended as it's expensive.
There was a problem hiding this comment.
recommended? do you have a reference so I can read up on that?
| // safety check | ||
| if (node.path.isEmpty) return false; | ||
|
|
||
| // Check if entire document is empty | ||
| final doc = editorState.document; | ||
| final isEmpty = doc.root.children.every( | ||
| (node) => node.delta?.isEmpty ?? true, | ||
| ); | ||
|
|
||
| // Show placeholder only on first line when document is empty | ||
| return isEmpty && node.path[0] == 0; | ||
| }, | ||
| // (node.delta?.isEmpty ?? true), | ||
| configuration: BlockComponentConfiguration( | ||
| placeholderText: (node) => widget.hintText ?? ' ', | ||
| ), | ||
| ); | ||
|
|
||
| return map; |
There was a problem hiding this comment.
Don't get much understanding here, would like to request @gnunicorn to review this.
|
Out of this PR scope, from reference video I found that this chat bubbles looks pretty weird. |
I guess it's the format. These inputs are solely used for testing. But that's not the common pattern of conversation in daily use. So I didn't considered much here. Unless you have some proposition? :) |
|
expected to also fix https://acter.sentry.io/issues/15543273/events/4cba9a7132e14874bda41a7ebc4e21c4/ |
| color: Theme.of(context).colorScheme.primaryContainer, | ||
| borderRadius: BorderRadius.only( | ||
| topLeft: Radius.circular(15.0), | ||
| topRight: Radius.circular(15.0), | ||
| ), | ||
| child: Row( | ||
| children: [ | ||
| leadingBtn(emojiPickerVisible), | ||
| editorField(), | ||
| trailingBtn(), | ||
| ], | ||
| border: BorderDirectional( | ||
| top: BorderSide(color: greyColor), | ||
| ), |
There was a problem hiding this comment.
I am not 100% sure about this new outline design change. It seems to be pushing the UI element to the front/above the other chat elements and thus giving the impression of being attached to the bottom bar rather than being part of the chat.
But let's not stop on this for now, we can revisit that once we are thinking of switching the labs to default on again.
| return Expanded( | ||
| child: IntrinsicHeight( |
There was a problem hiding this comment.
recommended? do you have a reference so I can read up on that?
Description:
Redesigned chat input with placeholder .i.e. hint text showing on empty state. (Encrypted / Non-encrypted message).
NOTE: the placeholder seems to not disappear when entering newline (if the first line is empty). This is problematic on appflowy end considering it somehow restricts showing placeholder on every empty line. And even modifying the conditions where we can make it disappear but throws internal exceptions. However, this can't be regard as much important because it disappears as soon something is typed.
(Desktop):
Screen.Recording.2025-01-06.at.19.17.21.mov
(Mobile):
ScreenRecording_01-06-2025.19-21-36_1.MP4
Also fixes #2469 / #2456 with reference in change-set and with proof:
ScreenRecording_01-06-2025.19-29-19_1.MP4