Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chat: Spike Typing Implementation #28183

Closed
wants to merge 6 commits into from
Closed

Chat: Spike Typing Implementation #28183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c5cab0c
Chat: Implement Typing
Oct 16, 2024
192b904
feat(chat): Add typingStatus (component && logic)
Oct 17, 2024
c1210ff
dirty
Oct 17, 2024
d7c7cb1
feat(spike)
Oct 18, 2024
723cf49
dirty
Oct 18, 2024
a04e5f1
refactor(chat): Get rid of timeouts
Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 69 additions & 2 deletions packages/devextreme/js/__internal/ui/chat/chat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,16 @@ import MessageList from './messagelist';
const CHAT_CLASS = 'dx-chat';
const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';

type Properties = ChatProperties & { title: string; showDayHeaders: boolean };
type Properties = ChatProperties & {
title: string;
showDayHeaders: boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onTypingStart: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onTypingEnd: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
typingStatuses: any;
};

class Chat extends Widget<Properties> {
_chatHeader?: ChatHeader;
Expand All @@ -32,6 +41,12 @@ class Chat extends Widget<Properties> {

_messageSendAction?: (e: Partial<MessageSendEvent>) => void;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
_typingStartAction?: any;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
_typingEndAction?: any;

_getDefaultOptions(): Properties {
return {
...super._getDefaultOptions(),
Expand All @@ -43,7 +58,10 @@ class Chat extends Widget<Properties> {
dataSource: null,
user: { id: new Guid().toString() },
onMessageSend: undefined,
onTypingStart: undefined,
onTypingEnd: undefined,
showDayHeaders: true,
typingStatuses: undefined,
};
}

Expand All @@ -57,6 +75,8 @@ class Chat extends Widget<Properties> {
this._refreshDataSource();

this._createMessageSendAction();
this._createTypingStartAction();
this._createTypingEndAction();
}

_dataSourceLoadErrorHandler(): void {
Expand Down Expand Up @@ -99,7 +119,12 @@ class Chat extends Widget<Properties> {
}

_renderMessageList(): void {
const { items = [], user, showDayHeaders } = this.option();
const {
user,
items = [],
showDayHeaders,
typingStatuses,
} = this.option();

const currentUserId = user?.id;
const $messageList = $('<div>');
Expand All @@ -110,6 +135,7 @@ class Chat extends Widget<Properties> {
items,
currentUserId,
showDayHeaders,
typingStatuses,
});
}

Expand All @@ -131,6 +157,12 @@ class Chat extends Widget<Properties> {
onMessageSend: (e) => {
this._messageSendHandler(e);
},
onTypingStart: () => {
this._typingStartHandler();
},
onTypingEnd: () => {
this._typingEndHandler();
},
};

this._messageBox = this._createComponent($messageBox, MessageBox, configuration);
Expand Down Expand Up @@ -158,6 +190,20 @@ class Chat extends Widget<Properties> {
);
}

_createTypingStartAction(): void {
this._typingStartAction = this._createActionByOption(
'onTypingStart',
{ excludeValidators: ['disabled', 'readOnly'] },
);
}

_createTypingEndAction(): void {
this._typingEndAction = this._createActionByOption(
'onTypingEnd',
{ excludeValidators: ['disabled', 'readOnly'] },
);
}

_messageSendHandler(e: MessageBoxMessageSendEvent): void {
const { text, event } = e;
const { user } = this.option();
Expand All @@ -171,6 +217,18 @@ class Chat extends Widget<Properties> {
this._messageSendAction?.({ message, event });
}

_typingStartHandler(): void {
const { user } = this.option();

this._typingStartAction?.({ user });
}

_typingEndHandler(): void {
const { user } = this.option();

this._typingEndAction?.({ user });
}

_focusTarget(): dxElementWrapper {
const $input = $(this.element()).find(`.${TEXTEDITOR_INPUT_CLASS}`);

Expand All @@ -181,6 +239,9 @@ class Chat extends Widget<Properties> {
const { name, value } = args;

switch (name) {
case 'typingStatuses':
this._messageList.option(name, value);
break;
case 'activeStateEnabled':
case 'focusStateEnabled':
case 'hoverStateEnabled':
Expand Down Expand Up @@ -216,6 +277,12 @@ class Chat extends Widget<Properties> {
case 'onMessageSend':
this._createMessageSendAction();
break;
case 'onTypingStart':
this._createTypingStartAction();
break;
case 'onTypingEnd':
this._createTypingEndAction();
break;
case 'showDayHeaders':
this._messageList.option(name, value);
break;
Expand Down
106 changes: 103 additions & 3 deletions packages/devextreme/js/__internal/ui/chat/messagebox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,39 @@ const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';

const TYPING_START_DELAY = 1500;
const TYPING_END_DELAY = 2000;

// eslint-disable-next-line @typescript-eslint/no-explicit-any, spellcheck/spell-checker
const debounce = (func: any, delay: number): any => {
let timestamp = 0;

// eslint-disable-next-line func-names, @typescript-eslint/no-explicit-any
return function (...args: any) {
const now = Date.now();

if (now - timestamp >= delay) {
// eslint-disable-next-line @typescript-eslint/no-invalid-this
func.apply(this, args);

timestamp = now;
}
};
};

export type MessageSendEvent =
NativeEventInfo<MessageBox, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> &
{ text?: string };

export interface Properties extends DOMComponentProperties<MessageBox> {
onMessageSend?: (e: MessageSendEvent) => void;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
onTypingStart?: any;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
onTypingEnd?: any;

activeStateEnabled?: boolean;

focusStateEnabled?: boolean;
Expand All @@ -36,6 +62,18 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {

_messageSendAction?: (e: Partial<MessageSendEvent>) => void;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
_typingStartAction?: any;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
_typingEndAction?: any;

// eslint-disable-next-line @typescript-eslint/no-explicit-any, spellcheck/spell-checker
_debouncedTriggerTypingStartEvent: any;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
_typingStartEventTimeout: any;

_getDefaultOptions(): Properties {
return {
...super._getDefaultOptions(),
Expand All @@ -50,6 +88,17 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
super._init();

this._createMessageSendAction();
this._createTypingStartAction();
this._createTypingEndAction();
this._wrapTriggerTypingStartEvent();
}

_wrapTriggerTypingStartEvent(): void {
// eslint-disable-next-line spellcheck/spell-checker
this._debouncedTriggerTypingStartEvent = debounce(
this._triggerTypingStartEvent,
TYPING_START_DELAY,
);
}

_initMarkup(): void {
Expand Down Expand Up @@ -82,9 +131,8 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
valueChangeEvent: 'input',
maxHeight: '8em',
onInput: (): void => {
const shouldButtonBeDisabled = !this._isValuableTextEntered();

this._toggleButtonDisableState(shouldButtonBeDisabled);
this._onInputToggleButtonStateHandler();
this._onInputTriggerTypingEventsHandler();
},
onEnterKey: (e: EnterKeyEvent): void => {
if (!e.event?.shiftKey) {
Expand Down Expand Up @@ -133,11 +181,57 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
);
}

_createTypingStartAction(): void {
this._typingStartAction = this._createActionByOption(
'onTypingStart',
{ excludeValidators: ['disabled', 'readOnly'] },
);
}

_createTypingEndAction(): void {
this._typingEndAction = this._createActionByOption(
'onTypingEnd',
{ excludeValidators: ['disabled', 'readOnly'] },
);
}

_onInputToggleButtonStateHandler(): void {
const shouldButtonBeDisabled = !this._isValuableTextEntered();

this._toggleButtonDisableState(shouldButtonBeDisabled);
}

_onInputTriggerTypingEventsHandler(): void {
if (this._isValuableTextEntered()) {
// eslint-disable-next-line spellcheck/spell-checker
this._debouncedTriggerTypingStartEvent();
}
}

_triggerTypingStartEvent(): void {
clearTimeout(this._typingStartEventTimeout);

// eslint-disable-next-line no-restricted-globals
this._typingStartEventTimeout = setTimeout(() => {
this._triggerTypingEndEvent();
}, TYPING_END_DELAY);

this._typingStartAction?.();
}

_triggerTypingEndEvent(): void {
this._typingEndAction?.();
}

_sendHandler(e: ClickEvent | EnterKeyEvent): void {
if (!this._isValuableTextEntered()) {
return;
}

clearTimeout(this._typingStartEventTimeout);

this._typingEndAction?.();

const { text } = this._textArea.option();

this._textArea.reset();
Expand Down Expand Up @@ -171,6 +265,12 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
case 'onMessageSend':
this._createMessageSendAction();
break;
case 'onTypingStart':
this._createTypingStartAction();
break;
case 'onTypingEnd':
this._createTypingEndAction();
break;
default:
super._optionChanged(args);
}
Expand Down
22 changes: 22 additions & 0 deletions packages/devextreme/js/__internal/ui/chat/messagelist.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Widget from '@ts/core/widget/widget';
import { isElementVisible } from '../splitter/utils/layout';
import type { MessageGroupAlignment } from './messagegroup';
import MessageGroup from './messagegroup';
import TypingStatus from './typingStatus';

const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';

Expand All @@ -33,6 +34,8 @@ export interface Properties extends WidgetOptions<MessageList> {
items: Message[];
currentUserId: number | string | undefined;
showDayHeaders: boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
typingStatuses: any;
}

class MessageList extends Widget<Properties> {
Expand All @@ -44,12 +47,15 @@ class MessageList extends Widget<Properties> {

private _scrollable!: Scrollable<unknown>;

private _typingStatus?: TypingStatus;

_getDefaultOptions(): Properties {
return {
...super._getDefaultOptions(),
items: [],
currentUserId: '',
showDayHeaders: true,
typingStatuses: undefined,
};
}

Expand All @@ -67,6 +73,7 @@ class MessageList extends Widget<Properties> {

this._renderScrollable();
this._renderMessageListContent();
this._renderTypingStatus();
this._updateAria();
}

Expand Down Expand Up @@ -218,6 +225,18 @@ class MessageList extends Widget<Properties> {
.appendTo(this._$content());
}

_renderTypingStatus(): void {
const $typingStatus = $('<div>');

$typingStatus.appendTo(this._$content());

const { typingStatuses } = this.option();

this._typingStatus = this._createComponent($typingStatus, TypingStatus, {
typingStatuses,
});
}

_renderMessageListContent(): void {
if (this._isEmpty()) {
this._renderEmptyViewContent();
Expand Down Expand Up @@ -382,6 +401,9 @@ class MessageList extends Widget<Properties> {
const { name, value, previousValue } = args;

switch (name) {
case 'typingStatuses':
this._typingStatus?.option(name, value);
break;
case 'currentUserId':
this._invalidate();
break;
Expand Down
Loading